如何使用反应导航在stacknavigator上更新自定义标题？

Question

我已经在这个问题上花了很多时间，但我不知道如何解决。我在App.js上有这个：

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/screens/homescreen';
import DetailScreen from './src/screens/detailscreen';
import Login from './src/screens/login';

const Stack = createStackNavigator();

function App() {

  return (    
    <NavigationContainer>    
      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Initial Title' }} />
        <Stack.Screen name="Login" component={Login} options={{ title: '' }} />
        <Stack.Screen name="Details" component={DetailScreen} />

      </Stack.Navigator>    
    </NavigationContainer>    
  );
}

export default App;

而且我在homescreen.js上有这个：

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Home from '../sections/containers/home';

function HomeScreen({ navigation }) {

    return (    
        <View style={styles.container} >
            <Home />    
            <Button
                title="Update"
                onPress={() => navigation.setParams({ title: 'Other title' })} />
        </View>
    );    
}

export default HomeScreen;

但是我无法在homescreen.js上设置自定义标题，如何在此屏幕上更改此参数和其他参数？或如何从该屏幕设置默认的自定义参数？

感谢您的帮助。

Answer 1

使用SetOptions方法：

import * as React from 'react';
import { View } from 'react-native';
import Home from '../sections/containers/home';


function HomeScreen({ navigation }) {

    navigation.setOptions({
        'title': 'Other title'
    })

    return (    
        <View style={styles.container} >
            <Home />
        </View>
    );

}

export default HomeScreen;