React Native Navigation：不调用setRoot如何新增底部标签页？

你之前用setStackRoot失败的原因是这个API仅针对**栈导航（Stack）**布局生效，而你的根布局是bottomTabs，两者完全不匹配。下面提供两种可行的解决方案，无需调用setRoot重载整个应用：

方案一：使用updateBottomTabs动态添加标签（v6+版本适用） #

React Native Navigation v6及以上版本提供了updateBottomTabs API，专门用于更新底部标签栏的配置，包括动态添加/修改子标签页。

实现代码如下：

const updateTabs = async () => {
  // 获取包含新标签的完整数组
  const newTabs = getTabs(true);
  // 传入底部标签栏的ID，更新子项
  await Navigation.updateBottomTabs(Stack.BOTTOM_TABS_STACK, {
    children: newTabs
  });
};

调用这个方法后，底部标签栏会直接更新为新的标签数组，不会重载整个应用内容。

方案二：预加载所有标签，控制可见性（兼容v5及以下版本） #

如果你的项目使用的是v5或更早版本，没有updateBottomTabs API，可以采用预加载所有标签、动态控制显示/隐藏的方式：

1. 初始化时就包含第5个标签，但默认设置为隐藏：

const getTabs = (showFifth = false) => [
  // 前4个默认显示的标签
  {
    stack: {
      id: 'Tab1',
      children: [{ component: { name: 'Tab1Screen' } }],
      options: { bottomTabs: { text: '首页' } }
    }
  },
  {
    stack: {
      id: 'Tab2',
      children: [{ component: { name: 'Tab2Screen' } }],
      options: { bottomTabs: { text: '分类' } }
    }
  },
  {
    stack: {
      id: 'Tab3',
      children: [{ component: { name: 'Tab3Screen' } }],
      options: { bottomTabs: { text: '购物车' } }
    }
  },
  {
    stack: {
      id: 'Tab4',
      children: [{ component: { name: 'Tab4Screen' } }],
      options: { bottomTabs: { text: '我的' } }
    }
  },
  // 第5个标签，默认隐藏
  {
    stack: {
      id: 'Tab5',
      children: [{ component: { name: 'Tab5Screen' } }],
      options: { bottomTabs: { text: '会员', visible: showFifth } }
    }
  }
];

2. 需要显示第5个标签时，调用setOptions修改其可见性：

const showFifthTab = async () => {
  await Navigation.setOptions('Tab5', {
    bottomTabs: { visible: true }
  });
};

这种方式不会重新加载任何页面，只是控制标签的显示状态，性能最优。

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