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

【问题标题】：How to conditionally change screenOptions for different react native screens in the same Navigator?如何有条件地更改同一导航器中不同反应本机屏幕的 screenOptions？
【发布时间】：2020-10-27 19:41:55
【问题描述】：

我有一个带 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）？

【问题讨论】：

您还可以检查开关内部的条件。如果您不想显示任何内容，只需返回 null

标签： javascript reactjs react-native expo react-navigation

【解决方案1】：

试试这个方法

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

【讨论】：

【解决方案2】：

如果您想为特定屏幕而不是所有屏幕指定选项，请在所需屏幕的option 中指定它，而不是在screenOptions 中：

<NavigationContainer>
  <Stack.Navigator
    screenOptions={{
      headerShown: true
    }}
  >
    <Stack.Screen
      name="Vocabulary"
      component={bottomNavigator}
      options={{
        // Show only for Vocabulary screen
        headerRight: () => <Switch />
      }}
    />
    <Stack.Screen name="Definition" component={Definition} />
  </Stack.Navigator>
</NavigationContainer>

如果您不希望某个选项应用于导航器中的所有屏幕，请不要在适用于所有屏幕的screenOptions 中指定它。多个导航器似乎有点过头了。

【讨论】：