如何隐藏 React Native NavigationBar

Question

我在 Navigator 下有 NavigatorIOS，想隐藏 Navigator 的 NavigationBar 以使用 NavigatorIOS 的栏。有什么办法吗？

这是我看过的screenshot。我需要 NavigatorIOS 的后端..

我要构建的结构如下：

├── NavigatorRoute1
│   ├── NavigatorIOSRoute1
│   ├── NavigatorIOSRoute2
│   └── NavigatorIOSRoute3
└── NavigatorRoute2

我的代码如下。（基本取自UIExplore实例

导航器

render: function(){
return (
  <Navigator
    initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
    initialRouteStack={ROUTE_STACK}
    style={styles.container}
    renderScene={this.renderScene}
    navigationBar={
      <Navigator.NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style={styles.navBar}
      />
    }
  />
);
}

NavigatorIOS

render: function(){
var nav = this.props.navigator;
 return (
  <NavigatorIOS
    style={styles.container}
    ref="nav"
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {nav: nav},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
);

}

更新我的解决方案

我添加了一个函数来更改处理 Navigator 渲染的状态，并将 prop 传递给组件以更改状态。

hideNavBar: function(){
  this.setState({hideNavBar: true});
},
render: function(){
 if ( this.state.hideNavBar === true ) {
  return (
    <Navigator
      initialRoute={ROUTE_STACK[0]}
      initialRouteStack={ROUTE_STACK}
      renderScene={this.renderScene}
    />
  );
 }else{
  return (
    <Navigator
      initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
      initialRouteStack={ROUTE_STACK}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

}

和

render: function(){
 var hideNavBar = this.props.hideNavBar;
 return (
  <NavigatorIOS
    style={styles.container}
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {hideNavBar: hideNavBar},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
 );

}

Answer 1

在您的导航器中 class 看起来您正在传递一个导航栏。您可以在其中添加逻辑以传入 Navigator.NavigationBar 或您的 NavigatorIOS 栏，具体取决于您要使用的内容。为此，您需要在 Navigator 中指定一个状态变量，当您希望栏发生变化时您将更新该变量。

Answer 2

如果你一直使用 NavigatorIOS，你可以这样做：

修改文件NavigatorIOS.ios.js如下：

before: navigationBarHidden={this.props.navigationBarHidden}
after:  navigationBarHidden={route.navigationBarHidden}

navigator.push({navigationBarHidden: false})

Answer 3

我通过定义一个可以检查当前路线的自定义 NavigationBar 解决了这个问题。看起来像这样：

class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];

      if (route.display === false) {
        return null;
      }
    }

    return super.render();
  }
}

使用你的例子：

render: function(){
  return (
    <Navigator
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        display: false,
      }}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

Answer 4

因为一些旧方法已被弃用，所以我使用了 stacknavigator。如果您使用的是 StackNavigator，它对我有用。

//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = { title: 'Welcome', header: null };

//For Latest Version Use:
static navigationOptions = { title: 'Welcome', headerShown: false};

如有任何问题，请随时联系。

Answer 5

我这样做了：

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},

Answer 6

通过将此属性与 navigator.push 或 initialRoute 设置为 true

一起传递

navigationBarHidden?: PropTypes.bool

布尔值，指示导航栏是否默认隐藏。

例如：

<NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'LOGIN',
            component: Main,
            navigationBarHidden: true,
          }}/>

或

this.props.navigator.replace({
        title: 'ProviderList',
        component: ProviderList,
        passProps: {text: "hai"},``
        navigationBarHidden: true,
  });

Answer 7

使用 header: null 作为 react-navigation，在你的 navigationOptions 中如下所示；

navigationOptions: {
    header: null,
}

Answer 8

static navigationOptions = { title: 'Welcome', header: null };

Answer 9

在 React Navigation (5.x,6.x) [当前版本是 6.x]

将headerShown属性设置为false隐藏导航栏如下:

<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />

完整示例：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


// Screen
import LoginScreen from '../screens/auth/LoginScreen';

const Stack = createStackNavigator();

const CareAndCarersNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default MainNavigation

在 React Navigation (4.0)

要隐藏导航栏，您有 3 个选项 :

1.对于单屏，可以在navigationOptions

中设置headernull

static navigationOptions = {
    //To hide the ActionBar/NavigationBar
    header: null,
};

2.对于单屏，可以这样在createStackNavigator中设置headernull

const App = createStackNavigator({
  First: {
    screen: HomeActivity,
    navigationOptions: {
      header: null,
    },
  },
});

3. 使用 defaultNavigationOptions

一次隐藏所有屏幕的 header

const App = createStackNavigator(
  {
    First: {
      screen: HomeActivity,
    },
  },{
    defaultNavigationOptions: {
      header: null
    },
  }
);

已更新

正如@DarthVanger 在下面的评论中所说，要隐藏堆栈中的所有 header，请使用 screenOptions，如下所示：

<NavigationContainer>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Navigator>
</NavigationContainer>

Answer 10

您需要像这样声明导航对象。

const StackNavigator = createStackNavigator(
  {
   Screen: { screen: HOME},
  },
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerShown: false,
        header: null,
        headerTitle: routeName
      };
    }
  }
);

Answer 11

对于 React 导航 5.x

在所有屏幕中隐藏导航栏

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

只在一屏或特定屏隐藏导航栏见以下代码

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

有关详细信息，请参阅 react-navigation-5.0。

如何隐藏 React Native NavigationBar

How to hide React Native NavigationBar

javascript

navigationbar

react-native

导航器

NavigatorIOS

更新我的解决方案

已更新