Question

如何在React-Nativa-Navigation V2中为特定屏幕禁用导航栏？

Answer 1

对于不显示顶部栏的特定组件，可以通过放置

来完成

topBar: {  visible: false }

在options的{{1}}中

component

如果还需要在堆栈级别进行设置，以使堆栈中没有任何屏幕显示顶部栏，则可以通过设置

Navigation.setRoot({
      root: {
        stack: {
          id: "App",
          children: [
            {
              component: {
                name: "rci.Login",
                options: {
                  topBar: {
                    visible: false
                  }
                }
              }
            }
          ]
        }
      }
    });

在堆栈内部。整个代码看起来像

 options: {
    topBar: {
      visible: false
    }
  },

Answer 2

您最好的选择是在组件内部设置静态选项：

export default class YourComponent extends Component {
  static get options() {
    return {
      topBar: {
        visible: false,
        animate: false
      }
    };
  }
}

请注意，您可以切换topBar可见性更改动画。

Answer 3

如果您使用的是StackNavigator，则需要在给定的屏幕上将header设置为null：

class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  ...
}

export default createStackNavigator({
  Home: HomeScreen
});

Answer 4

希望这会有所帮助。从@react-navigation/native 5.1.3开始的正确方法似乎是headerShown: false

<NavigationContainer>
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Login"
      component={LoginScreen}
      options={{ title: "Login Screen", headerShown: false }}
    />
    {..other stuff..}
  </Stack.Navigator>
</NavigationContainer>

从React-Native-Navigation v2中删除导航栏？

4 个答案: