React Native:多个导航器导航栏 [英] React Native : multiple Navigator navigationBar

问题描述

我被 React Native 困住了.

I'm stuck with React Native.

我有一个标题"导航栏，但我想向我的导航器组件添加另一个导航栏.

I have a "Header" navigationBar, but I want to add another navigationBar to my Navigator component.

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 ?
         />
    );
}

这里是

组件:

render() {
    return <Navigator.NavigationBar
        style={styles.navBarContainer}
        navState={this.props.navState}
        routeMapper={routeMapper}
    />
  }

现在，我正在尝试添加一个 <Footer/> 组件，它将呈现与 <Header/> 类似的组件，以便在我的应用上有 2 个持久导航栏.

Now, I'm trying to add a <Footer/> component, which would render a similar component as <Header/>, in order to have 2 persistent navigation bar on my app.

如何实现?

推荐答案

我也遇到了这个问题，已经解决了.在 React Native 中，不支持添加多个导航栏.但是，如果你想再添加一个navigationBar"，你可以把这个navigationBar"添加为Navigator的兄弟节点，比如:

I also meet this question, and have resolved it. In React Native, it is not supported to add multiple navigationBar. But, if you want to add another "navigationBar", you can add this "navigationBar" as the sibling node of the Navigator, such as:

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 一样.

In the upper code, TopStatusBar is a composite component. It persists across scene transitions, just like the navigatorBar.

祝你好运！

这篇关于React Native:多个导航器导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！