首页 > 解决方案 > React Navigation 5 使用类组件设置导航选项

问题描述

我最近将项目中的 react 导航版本升级到了版本 5,但仍然使用类组件,并且希望保留类组件。不幸的是,我不能再使用 navigationOptions 为我的班级设置导航属性。我想获得有关如何在类组件中为反应导航 5 设置 navigationOptions 的帮助。

const AppStack = createStackNavigator();

const app = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="SplashScreen">
        <AppStack.Screen name="SplashScreen" component={SplashScreen} options={{ headerShown: false, headerBackTitle: null }}/>
        <AppStack.Screen name="Login" component={Login} options={{ headerShown: true, headerBackTitle: null }}/>
       </AppStack.Navigator>
    </NavigationContainer>
  );
};

export default app;

class Login extends React.Component {

static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};
    return {
      headerTitle: params.headerTitle,
      headerRight: params.headerRight,
      headerLeft: params.headerLeft,
      headerStyle: params.headerStyle,
      headerTitleStyle: styles.headerTitle,
    };
  };
}

标签: reactjsreact-native

解决方案


推荐阅读