React Native顶部标签嵌套导航器如何传递参数到所有子标签页？

你可以通过以下两种常用方案实现需求，根据你的使用场景选择即可：

方案1：将公共参数传给顶部标签导航器父级，再分发到子标签页（无额外依赖，推荐） #

这种方案适合仅在跳转时一次性传递固定参数的场景，直接用React Navigation原生能力即可实现：

1. Home页面跳转时将公共参数传给父级标签导航路由

// HomeScreen 按钮点击跳转代码
onPress={() => {
  props.navigation.navigate({
    name: "tab",
    params:{ sharedData: "Testing" } // 这里的参数会传递给TopNavigator本身
  });
}}

2. 修改TopNavigator，将接收的公共参数作为初始参数传给所有子标签页

export const TopNavigator = ({ route }) => {
  // 取出父导航传递过来的公共参数
  const sharedParams = route.params;
  return (
      <TopTab.Navigator>
        <TopTab.Screen 
          name="profile" 
          component={profile} 
          initialParams={sharedParams} // 把公共参数下发给profile页
        />
        <TopTab.Screen 
          name="setting" 
          component={setting} 
          initialParams={sharedParams} // 把公共参数下发给setting页
        />
      </TopTab.Navigator>
  );
}

3. 子标签页直接取参数即可
   在profile和setting组件内，直接通过props.route.params.sharedData或者useRoute().params.sharedData就能拿到传递的公共参数，和普通页面取参逻辑完全一致。

方案2：用状态管理实现全局共享（适合参数动态更新的场景） #

如果你的共享参数需要后续动态修改、或者要跨更多页面共享，可以用React自带的Context，或者Zustand/Redux等状态管理库存储这份公共数据，两个标签页直接消费对应状态即可，不需要通过路由传参。

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