如何隐藏React Native NavigationBar

Question

我在Navigator下使用NavigatorIOS，希望隐藏Navigator的NavigationBar以使用NavigatorIOS的NavigationBar。有没有什么方法可以做到这一点？

这是我见过的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}
      />
    }
  />
);
}

导航器IOS

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"
  />
);

}

我的解决方案更新

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

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"
  />
 );

}

- shohey1226

---

你如何调用你创建的 hideNavBar 函数？我的项目是模块化的，我需要从另一个文件的组件中调用它。 - Naman Sogani

Answer 1

因为某些旧方法已被弃用，所以我使用了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};

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

- Naeem Ibrahim

---

嗨！你的解决方案简单且对我最有效。给你点赞：）。你是如何防止 Android 上的通知栏与导航栏重叠的？ - Andrei

除了这个以外，其他什么都没对我起作用。我正在使用react-native-cli: 2.0.1 react-native: 0.51.0 当然要使用StackNavigator。 - sam k

Answer 2

我通过定义一个自定义的NavigationBar来解决这个问题，该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}
        />
      }
    />
  );
}

- Jeff Trudeau

---

我想补充一下，我曾尝试依赖于this.props.navState.presentedIndex，但在渲染时它总是落后于实际的presentedIndex。最终我采用了在渲染中使用requestAnimationFrame，并在下一帧检查正确的presentedIndex的方法。 - Gaston Morixe

@GastonM，您能否详细说明一下您如何使用requestAnimationFrame解决的问题？ - Vivek R

Answer 3

在 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 中将 header 设置为 null

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

2. 对于单个屏幕，您可以在createStackNavigator中将标题设置为空，方法如下：

header: () => null

请注意，此设置仅适用于单个屏幕，如果您希望在整个应用程序中隐藏标题栏，则应该在创建导航器时使用screenOptions={{ headerShown: false }}。

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

3. 使用defaultNavigationOptions一次隐藏所有屏幕的标题

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

已更新

正如 @DarthVanger 在下面的评论中所说，要隐藏堆栈中的所有标题，请使用以下方式：screenOptions：

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

- Abolfazl Roshanzamir

---

要在所有屏幕上隐藏它，请使用 <Stack.Navigator screenOptions={{ headerShown: false }}>. - DarthVanger

Answer 4

针对React Navigation 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 获取更多信息。

- AtulParmar

Answer 5

我做了这个：

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

- Роман Карабанов

---

嗨，这个加法应该隐藏Android中的软按钮吗？headerLeft中的“left”是什么意思？为什么我不能只写“header:null”？ - Tal Shani

Answer 6

如果你一直使用NavigatorIOS，可以像这样操作：

1. modify the file NavigatorIOS.ios.js as below:

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

2. navigator.push({navigationBarHidden: false})

- H87kg_X

Answer 7

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

- Shubham Goel

Answer 8

通过将其设置为true，可以在navigator.push或initialRoute中传递该属性

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,
  });

- Tibin Thomas

Answer 9

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

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

- Ramana Sakhavarapu

Answer 10

在您的navigationOptions中使用header: null来处理react-navigation相关问题。

navigationOptions: {
    header: null,
}

- Isaac Sekamatte

---

嗨，这个加法应该可以隐藏安卓系统中的软按键吗？ - Tal Shani