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;

Answer 2

与@Alfredo不同，如果您仍在使用类组件，那么我可以通过以下方式进行操作：

constructor(props) {
super(props);

this.props.navigation.setOptions({
  title: 'Disco',
  headerRight: () => (
    <Image
      style={{
        width: 48,
        height: 48,
        marginEnd: 16
      }}
      source={icLogout}
    />
  )
})}

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

2 个答案: