如何隐藏React Native NavigationBar

24

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

}


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

2

在您的Navigator类中,看起来您正在传递一个导航栏。您可以在那里添加逻辑,根据需要传递Navigator.NavigationBar或NavigatorIOS栏。要执行此操作,您需要在Navigator中指定一个状态变量,在您想要更改栏时更新该变量。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接