如何隐藏React Native NavigationBar

I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this?

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

This is screenshot that I've seen. I need backend of NavigatorIOS..

这是我见过的截图。我需要NavigatorIOS的后端..

The structure that I want to build is the following:

我想要构建的结构如下:

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

The code that I have is the below. (Basically obtained from UIExplore examples.

我的代码如下。 (基本上从UIExplore示例中获得。

Navigator

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

}

UPDATE with my solution

I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.

我添加了一个函数来更改处理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}
        />
      }
    />
  );
}

}

and

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

}

8 个解决方案

#1

In your Navigator class it looks like you're passing in a navigation bar. You can add logic there to pass in either Navigator.NavigationBar or your NavigatorIOS bar depending on which you'd like to use. To do that you'd need to specify a state variable in Navigator that you'd update when you want the bar to change.

在Navigator类中,它看起来像是在传递导航栏。您可以在那里添加逻辑以传递Navigator.NavigationBar或NavigatorIOS栏,具体取决于您要使用的位置。要做到这一点,您需要在Navigator中指定一个状态变量,当您想要更改该栏时,您需要更新该状态变量。

#2

I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:

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

Using your example:

使用你的例子:

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

#3

Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.

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

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

Feel free to contact, if any issue.

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

#4

I did this:

我这样做了:

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

#5

If you use NavigatorIOS always, you can do it like this:

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

modify the file NavigatorIOS.ios.js as below:

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

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

navigator.push({navigationBarHidden: false})

#6

pass this property along with navigator.push or initialRoute by setting it as true

通过将此属性与navigator.push或initialRoute一起设置为true来传递该属性

navigationBarHidden?: PropTypes.bool

Boolean value that indicates whether the navigation bar is hidden by default.

布尔值,指示默认情况下是否隐藏导航栏。

eg:

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

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

#7

use header: null for react-navigation, in your navigationOptions as follows;

在navigationOptions中使用header:null作为react-navigation,如下所示;

navigationOptions: {
    header: null,
}

#8

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

#1

#2