React Navigation 隐藏/显示导航栏答案

【问题标题】：React Navigation hide/show navigation barReact Navigation 隐藏/显示导航栏
【发布时间】：2020-02-16 10:31:41
【问题描述】：

我在使用 ReactNavigation 5.x 隐藏或显示导航栏时遇到问题。

例如，如果我有一个带有 ScreenA、ScreenB 和 ScreenC 的导航堆栈。 ScreenA 不应该显示导航栏，但在移动到 ScreenB 或 ScreenC 时，导航栏应该是可见的。在弹出到 ScreenA 时，该栏应该不再存在。我使用了以下代码，但这使该栏始终隐藏。这必须在 iOS 和 Android 中实现。

class App extends Component {
  render() {
    return(
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen
            name="Login"
            component={LoginScreen}/>
          <Stack.Screen
            title='Parent Info'
            name='ParentInfo'
            component={ParentInfoScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    )}
}

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

每个屏幕也有一个 options 道具，因此不要在 stack.navigator 上使用 screenOptions，而是在 stack.screen 上使用 options，如下所示：

<Stack.Navigator>
  <Stack.Screen
    options={{headerShown: false}}
    name="Login"
    component={LoginScreen}
  />
  <Stack.Screen
    title="Parent Info"
    name="ParentInfo"
    component={ParentInfoScreen}
  />
</Stack.Navigator>

然后你可以通过屏幕指定

【讨论】：