javascript - 如何有条件地更改同一导航器中不同反应本机屏幕的 screenOptions？

Question

我有一个带 2 个屏幕的导航器。在其中一个屏幕中，我想显示headerRight组件，而在另一个屏幕中，我不想显示headerRight组件。

我的导航如下所示：

    <NavigationContainer>
      <Stack.Navigator screenOptions={{ 
        headerShown: true, 
        headerRight: () => <Switch /> // conitionally change this
      }}>
        <Stack.Screen name="Vocabulary" component={bottomNavigator} />
        <Stack.Screen name="Definition" component={Definition}  />
      </Stack.Navigator>
    </NavigationContainer>

• 我是否headerRight根据可见的屏幕有条件地渲染？
• 我有多个导航器吗？
• 我是否在呈现的组件（即Definition）中配置它？

标签： javascriptreactjsreact-nativeexporeact-navigation

Answer 1

试试这个方法

componentDidMount() {
    this.props.navigation.setOptions({
      headerRight: <Switch />
    });
}