Expo v4/React 顶部标签导航如何在多个Tab屏幕间共享传递参数

方案1：通过Tab导航的initialParams共享参数（适合静态参数场景） #

首先调整跳转逻辑，把需要共享的参数直接传给父级OrderScreen，不要嵌套在子页面的params里：

// 跳转时代码修改
navigation.navigate('Order', {datas: someDatas});

然后修改OrderScreen代码，给所有Tab子页面配置相同的initialParams：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

export default function OrderScreen({navigation, route}) {
  // 拿到传给Order页面的所有共享参数
  const sharedParams = route.params

  return (
    <Tab.Navigator>
      {/* 给每个Tab页面都传入共享的初始参数 */}
      <Tab.Screen 
        name="Details" 
        component={DetailsScreen} 
        initialParams={sharedParams}
      />  
      <Tab.Screen 
        name="Photos" 
        component={PhotosScreen} 
        initialParams={sharedParams}
      />
    </Tab.Navigator>
  );
}

最后子页面直接从自身的route props里取参数即可：

// PhotosScreen.tsx 示例
export default function PhotosScreen({route}) {
  // 直接获取共享参数
  const datas = route.params.datas
}

// DetailsScreen.tsx 示例
export default function DetailsScreen({route}) {
  const datas = route.params.datas
}

方案2：直接透传Props（适合参数会动态更新的场景） #

如果共享参数后续会在OrderScreen里动态变更，用initialParams无法同步更新的话，可以用Tab.Screen的children渲染方式直接透传参数：

// OrderScreen 修改示例
import { useState } from 'react';

export default function OrderScreen({navigation, route}) {
  const [sharedData, setSharedData] = useState(route.params.datas)

  return (
    <Tab.Navigator>
      <Tab.Screen name="Details">
        {() => <DetailsScreen datas={sharedData} updateDatas={setSharedData} />}
      </Tab.Screen>  
      <Tab.Screen name="Photos">
        {() => <PhotosScreen datas={sharedData} updateDatas={setSharedData} />}
      </Tab.Screen>
    </Tab.Navigator>
  );
}

子页面直接从props取对应参数即可：

export default function PhotosScreen({datas, updateDatas}) {
  // 直接使用透传的参数，还能调用方法更新全局共享数据
}

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