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

Question

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

导航：

 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”，如果这很重要的话。

Answer 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。