Реагировать Родной: несколько Навигатор navigationBar

Question

Я застрял с React Native.

У меня есть «Header» navigationBar, но я хочу добавить еще одну навигационную панель в мой компонент Navigator.

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 упорную панель навигации на моем приложении.

Как достичь этого?

Answer 1

Я также встречаю этот вопрос и разрешил его. В React Native не поддерживается добавление нескольких navigationBar. Но, если вы хотите добавить еще «Панель навигации», вы можете добавить «Панель навигации» в качестве родственного узла навигатора, например:

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 является составным компонентом. Он сохраняется на сцене, как навигатор.

Удачи вам!