React Native:多个Navigator navigationBar

Question

我坚持使用React Native.

我有一个"Header"导航栏,但我想在导航器组件中添加另一个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个持久性导航栏.

怎么做到这一点？

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是一个复合组件。它在场景转换中持续存在，就像导航栏一样。

祝你好运！