如何切换选项卡 react-native-navigation

Posted 2023-02-16

【中文标题】如何切换选项卡 react-native-navigation

【英文标题】：How to switch tabs react-native-navigation

【发布时间】：2022-01-09 06:08:30

【问题描述】：

试图弄清楚这一点，我想我只是错过了一些简单的东西。我已经配置了几个屏幕，我想在第二个屏幕上等待用户操作的选项卡之间切换。

导航：

 Navigation.setRoot(
    root: 
      bottomTabs: 
        children: [
          
            stack: 
              id: 'rootStack',
              children: [
                
                  component: 
                    name: 'dashboard',
                    id: 'cc.dashboard',
                    options: 
                      statusBar: 
                        visible: true,
                        style: 'light',
                      ,
                    ,
                  ,
                ,
              ],
              options: 
                bottomTab: 
                  title: 'Home',
                  icon: images.bottomIconHome,
                  testID: 'FIRST_TAB_BAR',
                  text: 'Home',
                  selectedIconColor: color.WHITE,
                  selectedTextColor: color.WHITE,
                  iconColor: color.WHITE_25,
                  textColor: color.WHITE_25,
                  fontFamily: font.LATO_BOLD,
                  fontSize: 11,
                ,
                bottomTabs: 
                  selectedTabColor: 'white',
                  backgroundColor: color.charcoalGreyThree,
                  titleDisplayMode: 'alwaysShow',
                  // fontSize: 10
                ,
                topBar: 
                  visible: false,
                ,
                statusBar: 
                  visible: true,
                  style: 'light',
                ,
                layout: 
                  orientation: ['portrait'],
                ,
              ,
            ,
          ,
          
            stack: 
              id:'screen2stack',
              children: [
                
                  component: 
                    name: 'program',
                    id: 'cc.program',
                    options: 
                      statusBar: 
                        visible: true,
                        style: 'light',
                      ,
                    ,
                  ,
                ,
              ],
              options: 
                bottomTab: 
                  title: 'Program Tab',
                  icon: images.bottomIconProgram,
                  testID: 'SECOND_TAB_BAR_BUTTON',
                  text: 'Program',
                  selectedIconColor: color.WHITE,
                  selectedTextColor: color.WHITE,
                  iconColor: color.WHITE_25,
                  textColor: color.WHITE_25,
                  fontFamily: font.LATO_BOLD,
                  fontSize: 11,
                ,
                bottomTabs: 
                  selectedTabColor: 'white',
                  backgroundColor: color.charcoalGreyThree,
                  titleDisplayMode: 'alwaysShow',
                  //fontSize: 10
                ,
                topBar: 
                  visible: false,
                ,
                statusBar: 
                  visible: true,
                  style: 'light',
                ,
                layout: 
                  orientation: ['portrait'],
                ,
              ,
            ,
          ,

);

我试过了：

Navigation.popTo('cc.dashboard');

但这没有任何作用，所以我尝试了：

  Navigation.push('cc.dashboard', 
    component: 
      id: 'cc.dashboard',
      name: 'dashboard',
      passProps: propsToPass ? propsToPass : ,
      options: 
        layout: 
          backgroundColor: color.charcoalGreyThree,
          componentBackgroundColor: color.charcoalGreyThree,
        ,
        bottomTabs: 
          visible: true,
          backgroundColor: color.charcoalGreyThree,
        ,
      ,
    ,
  );

这可行，但它不会更新屏幕上的底部标签，仍将第二个标签显示为突出显示。它也只是将仪表板放在上面，因此您仍然可以单击“主页”并转到仪表板。当您返回第二个屏幕时，它仍然显示仪表板。任何想法将不胜感激。

使用“react-native-navigation”：“^7.16.0”、“react”：“17.0.1”、“react-native”：“0.64.1”，如果这很重要的话。

【参考方案1】：

为了在 React Native Navigation 中更改当前选项卡索引，您需要为 bottomTabs 选项做合并选项：

Navigation.mergeOptions(this.props.componentId, 
  bottomTabs: 
    currentTabIndex: 1
  
);

如需了解更多信息，建议您查看文档中的这一部分 - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index。

【讨论】：

谢谢，我知道我掩盖了它，在我为 bottom_tabs 对象分配了一个 id 并能够合并到它之后对其进行了整理。