react-native-navigation中如何响应用户操作切换底部Tab标签

解决方案 #

你之前使用的API均不适用于底部标签切换场景：

• Navigation.popTo 仅支持同一导航栈内的页面回退，你配置的两个标签分属独立的导航栈，调用后无响应属于正常逻辑。
• Navigation.push 是向指定栈中新增页面实例，因此会出现页面叠加、底部标签选中状态不更新的问题。

正确实现步骤

1. 首先修改导航根节点初始化配置，给bottomTabs容器添加唯一ID，用于后续属性修改：

Navigation.setRoot({
    root: {
      bottomTabs: {
        id: 'mainBottomTabs', // 新增此行，给底部标签容器设置唯一标识
        children: [
          // 原有两个stack配置保持不变
        ]
      }
    }
});

2. 在第二个页面需要触发标签切换的逻辑处，调用Navigation.mergeOptions修改底部标签的选中索引即可（索引从0开始计数，和你配置的children顺序一一对应，第一个Home标签对应索引0）：

// 切换到第一个Home标签
Navigation.mergeOptions('mainBottomTabs', {
  bottomTabs: {
    currentTabIndex: 0
  }
});

// 如果需要向dashboard页面传递参数，可额外调用updateProps
if (propsToPass) {
  Navigation.updateProps('cc.dashboard', propsToPass);
}

3. 可选补充：如果切换标签时需要将目标栈的页面重置到栈顶（比如Home栈之前打开过其他子页面，切回时直接回到dashboard首页），可额外调用栈重置方法：

Navigation.popToRoot('rootStack');

内容的提问来源于stack exchange，提问作者freshsmoe