如何将React Navigation参数传递给同一Tab Navigator下的多个屏幕

核心原因 #

你传递给User路由的参数是挂载在Tab导航器对应的父路由上的，Tab内部的子屏幕默认和父路由参数隔离，所以无法直接通过自身的route.params读取。另外注意你原代码里UserTab内嵌套在Tab.Navigator下的组件应该用Tab.Screen而不是Stack.Screen，属于笔误，以下方案已修正该问题。

解决方案1：透传参数到Tab子屏幕（最简便） #

修改UserTab组件，先接收父路由传入的参数，再通过initialParams属性传递给每个Tab子屏幕：

// 给UserTab加上route参数，它作为Stack.Screen的组件可以拿到父路由的route和navigation
const UserTab = ({ route }) => {
  // 先拿到父路由传入的共享参数
  const sharedParam = route.params?.prop_i_want_to_share;
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="UserInfo" 
        component={UserInfoScreen} 
        initialParams={{ prop_i_want_to_share: sharedParam }} 
      />
      <Tab.Screen 
        name="UserEdit" 
        component={UserEditScreen} 
        initialParams={{ prop_i_want_to_share: sharedParam }} 
      />
    </Tab.Navigator>
  );
};

改完之后你原来的UserInfoScreen和UserEditScreen里的route.params.prop_i_want_to_share就能正常读取到值了。

解决方案2：子屏幕直接读取父路由参数 #

如果不想改Tab导航的配置，也可以在子屏幕中直接调用父导航的API读取参数：

const UserInfoScreen = ({ navigation }) => {
  // 直接从父Stack导航器拿到User路由的参数
  const sharedParam = navigation.getParent().getParams('prop_i_want_to_share');
  return (
    <View>
      {sharedParam}
    </View>
  );
};

解决方案3：Context包裹共享（适合复杂共享场景） #

如果后续要共享的参数不止一个，还有实时更新的需求，可以用React Context做局部状态共享：

// 先创建Context
const UserSharedContext = React.createContext();

// 改造UserTab用Context包裹子路由
const UserTab = ({ route }) => {
  const sharedValue = route.params?.prop_i_want_to_share;
  return (
    <UserSharedContext.Provider value={sharedValue}>
      <Tab.Navigator>
        <Tab.Screen name="UserInfo" component={UserInfoScreen} />
        <Tab.Screen name="UserEdit" component={UserEditScreen} />
      </Tab.Navigator>
    </UserSharedContext.Provider>
  )
}

// 子屏幕中使用
const UserInfoScreen = () => {
  const sharedParam = React.useContext(UserSharedContext);
  return <View>{sharedParam}</View>
}

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