Question

我在react-native应用程序中使用react-native-navigation进行导航。我想在第一个屏幕上隐藏导航栏我试过了

{ navBarHidden: true}

完整的导航代码是：

 Navigation.startSingleScreenApp({
    screen: {
        label: "Login",
        screen: "LoginComponent",
        icon: require('./asset/menu.png'),
        title: "Login",
      }, 
      navigationBarStyle : {navBarHidden: true },
      passProps: {},
      animationType: 'slide-down'
  });

未显示任何错误，仍然可以在我的登录屏幕上看到导航栏。

Answer 1

我已经改变了

 Navigation.startSingleScreenApp({
    screen: {
        label: "Login",
        screen: "LoginComponent",
        icon: require('./asset/menu.png'),
        title: "Login",
      }, 
      navigationBarStyle : {navBarHidden: true },
      passProps: {},
      animationType: 'slide-down'
  });

到

   Navigation.startSingleScreenApp({
        screen: {
         label: "Login",
        screen: "LoginComponent",
        icon: require('./asset/menu.png'),
        title: "Login",
       navigationBarStyle : {navBarHidden: true },
      }, 
      passProps: {},
      animationType: 'slide-down'
  });

它就像魅力一样。

Answer 2

在React-native-navigation V2中禁用导航栏： topBar：{可见：false}

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

Answer 3

样式在navigatorStyle中声明，可以在屏幕上静态声明，也可以在推动屏幕或调用startSingleScreenApp时动态声明

Answer 4

在新版本的react-native-navigator（2.0）上，您必须在navigatorStyle而不是navigationBarStyle上添加参数。

Navigation.startSingleScreenApp({
  screen: {
    label: "Login",
    screen: "LoginComponent",
    icon: require('./asset/menu.png'),
    title: "Login",
    navigatorStyle: { navBarHidden: true }
  }, 
  passProps: {},
  animationType: 'slide-down'
});

那样就可以了。

Answer 5

这是针对reactnavigation@v2.14

{
   headerMode: 'none',
   navigationOptions: {
     headerVisible: false,
   }
 }

完整代码

const RootStack = createStackNavigator(
{
   Login: { screen: Login},
   Signup: { screen: Signup},
   ForgotPassword: { screen: ForgotPassword},
 }, 
 {
   headerMode: 'none',
   navigationOptions: {
    headerVisible: false,
   }
 }
)

React-native-navigation在登录屏幕上隐藏导航栏？

5 个答案: