React Native: 多个导航器navigationBar

Question

我在使用React Native时遇到了困难。

我有一个名为“Header”的navigationBar，但我想在我的Navigator组件中添加另一个navigationBar。

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个持久的导航栏。如何实现这一点？

- enguerranws

---

两个条的排列方式是怎样的？垂直的吗？还是只是在标题组件中并排的两个白色条？ - herbertD

好的，<Header/>位于屏幕顶部，<Footer/>位于底部。两者都是水平导航栏。 - enguerranws

我已经尝试将我的两个导航栏放在<Header/>组件中，但我无法弄清楚如何为正确的布局使用样式（我的意思是，头部在顶部，内容在中间，页脚在底部），因为React Native不允许所有flex属性... - enguerranws

也许你可以在从renderScene返回的组件中构建自己的页脚。这样至少可以正确布局；但是你需要部分地自己构建NavigationBar提供的功能。 - Frederick Motte

Answer 1

我也遇到过这个问题，并解决了它。在 React Native 中，不支持添加多个navigationBar。但是，如果您想要添加另一个 "navigationBar"，则可以将此 "navigationBar" 添加为Navigator的兄弟节点，例如：

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是一个组合组件。它跨场景转换保持不变，就像navigatorBar一样。

祝好运！

- Renguang Dong