加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native – React Native:多个Navigator navigationBar

发布时间:2020-12-15 20:19:09 所属栏目:百科 来源:网络整理
导读:我坚持使用React Native. 我有一个“Header”导航栏,但我想在导航器组件中添加另一个navigationBar. render() { let currentRoute = this.props.route return ( Navigator style={styles.container} initialRoute={this.props.route} renderScene={this.rout
我坚持使用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个持久性导航栏.

怎么做到这一点?

解决方法

我也遇到了这个问题,并且已经解决了.在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一样.

祝好运!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读