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個永久導航欄在我的應用程序。

如何實現這一目標？

來源

2016-02-26 enguerranws

兩根杆的排列方式如何？垂直？或在標題組件上只是白色的兩個橫條。 – herbertD

恩，

位於屏幕頂部，底部爲

我已經嘗試將兩個導航欄放在

組件中，但我無法確定如何使用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是一個複合組件。它像導航條一樣持續存在於場景轉換中。

祝你好運！

來源

2016-04-27 09:07:41

React Native：多個導航器導航欄

回答

相關問題