React Navigation hide/show 导航栏

Question

我在使用 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>
    )}
}

Answer 1

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

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

然后你可以通过屏幕指定

React Navigation hide/show 导航栏

React Navigation hide/show navigation bar

react-native

react-native-navigation