React Native：多个 Navigator 导航栏答案

【问题标题】：React Native : multiple Navigator navigationBarReact Native：多个 Navigator 导航栏
【发布时间】：2016-02-26 09:29:55
【问题描述】：

我被 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 个持久导航栏。

如何做到这一点？

【问题讨论】：

两个条的排列方式是怎样的？垂直的？或者只是在 Header Component 上添加两个白条。
嗯，
在屏幕顶部，
在底部。两者都是水平导航栏。
我已经尝试将我的两个导航栏放在
组件中，但我不知道如何将样式用于正确的布局（我的意思是，标题在顶部，内容在中间，底部页脚），因为 React Native 不允许所有 flex 属性...
也许您可以构建自己的页脚作为您从 renderScene 返回的组件的一部分？至少您可以通过这种方式获得正确的布局；但是您必须自己构建 NavigationBar 提供的部分功能..

标签： react-native

【解决方案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。

祝你好运！

【讨论】：