Question

我被React Native困住了。

我有一个＆＃34; Header＆＃34; navigationBar，但我想在导航器组件中添加另一个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个持久性导航栏。< / strong>

如何实现这一目标？

Answer 1

我也遇到了这个问题，并且已经解决了。在React Native中，不支持添加多个navigationBar。但是，如果要添加另一个“navigationBar”，可以将此“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是一个复合组件。它会在场景转换中持续存在，就像navigatorBar一样。

祝你好运！

React Native：多个Navigator navigationBar

1 个答案: