React Native：多个导航器导航栏

问题描述：

我有一个“标题”导航栏，但我想添加另一个导航栏到我的导航组件。

render() { 
    let currentRoute = this.props.route 
    return (
     <Navigator 
      style={styles.container} 
      initialRoute={this.props.route} 
      renderScene={this.router.bind(this)} 
      navigationBar={<Header />} // << There, how can I simply add another navigationBar ? 
     /> 
    ); 
}

而这里的<Header/>组件：

render() { 
    return <Navigator.NavigationBar 
     style={styles.navBarContainer} 
     navState={this.props.navState} 
     routeMapper={routeMapper} 
    /> 
    }

现在，我想添加一个<Footer/>组件，它会呈现一个类似的组件为<Header/>，为了有2个永久导航栏在我的应用程序。

如何实现这一目标？

两根杆的排列方式如何？垂直？或在标题组件上只是白色的两个横条。 – herbertD

恩，

位于屏幕顶部，底部为。两者都是水平的导航栏。 – enguerranws

我已经尝试将两个导航栏放在

组件中，但我无法确定如何使用React Native的正确布局（我的意思是，页眉位于顶部，内容位于中间，页脚位于底部）的样式不允许所有的flex属性... – enguerranws

答

我也遇到这个问题，并已解决它。在React Native中，不支持添加多个导航栏。但是，如果要添加其他“的导航栏”，您可以添加此“的导航栏”作为导航的兄弟节点，如：

render() { 
    return (
     <View style={styles.scene}> 
      <TopStatusBar 
       showBackIcon={false} 
       centerText={LocalizedStrings.appName} 
       rightIcon={require("../../res/icons/head.png")} 
       onRightPress={this._onHeadPress.bind(this)} 
      /> 

      <Navigator 
       initialRoute={ROUTE_STACK[0]} 
       renderScene={this._renderScene.bind(this)} 
       configureScene={() => Navigator.SceneConfigs.FadeAndroid} 
       navigationBar={ 
        this.state.displayBottomTabBar ? 
         <BottomTabBar 
          ROUTE_STACK={ROUTE_STACK} 
         /> 
        : 
         null 
       } 
       onWillFocus={(route) => { 
        this.presentedRoute = route; 
       }} 
       sceneStyle={{flex: 1}} 
      /> 
     </View> 
    ); 
}

在上面的代码中，TopStatusBar是一个复合组件。它像导航条一样持续存在于场景转换中。

祝你好运！

React Native：多个导航器导航栏

相关推荐