显示错误标题的选项卡

Question

我正在开发 react-native 移动应用程序。升级 RN 版本和 react-native-router-flux ^4.0.6 后。我正在使用类似于 ]

它必须显示 Tabs，标题为 HOME，CATEGORIES，Success stories。但据观察，它不断获取抽屉的标题，标签看起来像这样 Home、mainTitle、mainTitle。其中主标题是抽屉上设置的标题。

只有显示在右侧的标签是带有初始标签的标签。

预期：选项卡将在抽屉下方的屏幕上显示其标题。现实：每次都显示抽屉菜单的标题。这是我的代码。



    <Drawer
                initial
                navigationBarStyle={Styles.navigationBarStyle} key="drawer"
                contentComponent={DrawerMenu} drawerWidth={220}
                drawerIcon={<Icon name='menu' color={Colors.black} size={30}
                                  style={{marginTop: Platform.OS === 'ios' ? -5 : 0}}
                                  onPress={this.handleDrawerIconPress}/>}
                title='main Title' rightTitle=' '
              >
                <Tabs
                  initial
                  tabBarPosition="top"
                  key="tabbar"
                  swipeEnabled
                  showLabel={false}
                  activeBackgroundColor={Colors.pink}
                  activeTintColor={Colors.pink}
                  inActiveTintColor={Colors.black}
                  inactiveBackgroundColor={Colors.black}
                  tabBarStyle={Styles.tabBar}
                  indicatorStyle={Styles.indicatorStyle}
                  iconStyle={Styles.iconStyle}
                  showIcon={true}
                >
                  <Scene
                    initial
                    key="home"
                    component={Home}
                    icon={TabsIcon}
                    title="HOME"
                    iconName='home'
                    hideNavBar
                  />
                  <Scene
                    key="categories"
                    component={Categories}
                    title="CATEGORIES"
                    icon={TabsIcon}
                    iconName='categories'
                    hideNavBar
                  />
                  <Scene
                    key="success"
                    component={SuccessStories}
                    title="SUCCESS STORIES"
                    icon={TabsIcon}
                    iconName='success-stories'
                    hideNavBar
                  />
                </Tabs>
              </Drawer>

Answer 1

花了几个小时后，我修复了它。实际上 react-native-router-flux 没有他们文档中提到的任何属性标题。 react-native-router-flux-documentation。所以我得到了解决问题的技巧，那就是我在 drawer 中使用了 getTitle 而不是 title。我的代码现在看起来像这样

    <Drawer
        initial
        navigationBarStyle={Styles.navigationBarStyle} key="drawer"
        contentComponent={DrawerMenu} drawerWidth={220}
        drawerIcon={<Icon name='menu' color={Colors.black} size={30}
                          style={{marginTop: Platform.OS === 'ios' ? -5 : 0}}
                          onPress={this.handleDrawerIconPress}/>}
        getTitle="Main Title"  rightTitle=' '
     >

它解决了我的问题。感谢所有看过它的人。

显示错误标题的选项卡

Tabs showing wrong title

android

reactjs

react-native

react-native-router-flux