如何隐藏React Native NavigationBar

Question

我在Navigator下有NavigatorIOS,并希望隐藏Navigator的NavigationBar以使用NavigatorIOS的栏.有没有办法做到这一点？

这是我见过的截图.我需要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

我通过定义一个可以检查当前路由的自定义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 2

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

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

如有任何问题,请随时联系.

Answer 3

在 React Navigation (5.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 导航 (4.0) 中

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

1.对于单屏，可以在navigationOptions中设置header null

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

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

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

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

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

Answer 4

我这样做了:

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

Answer 5

对于 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。

Answer 6

如果你总是使用NavigatorIOS,你可以这样做:

1. 修改NavigatorIOS.ios.js文件如下:

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

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

Answer 7

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