React Navigation v6：向屏幕传递额外props的可行方案咨询

下面是几种替代过时Context方案的可行实现方式，完全满足你传递额外props的需求：

1. 渲染回调（最贴近你想要的写法） #

直接用children的渲染回调替代component属性，在回调里返回你的屏幕组件并传入需要的props：

<Tab.Navigator>
  <Tab.Screen name="YourScreen">
    {() => <YourScreenComponent prop1={prop1} />}
  </Tab.Screen>
</Tab.Navigator>

这种写法和你期望的<Tab.Screen prop1={prop1}>逻辑一致，只是把props传递的位置放到了内部的渲染回调里，也是React Navigation官方推荐的传递额外props的方式。

2. 利用initialParams传递初始化props #

如果你的props是初始化时固定的，或者需要和导航参数关联，可以用initialParams：

<Tab.Navigator>
  <Tab.Screen
    name="YourScreen"
    component={YourScreenComponent}
    initialParams={{ prop1: prop1 }}
  />
</Tab.Screen>

然后在屏幕组件中通过route.params获取：

function YourScreenComponent({ route }) {
  const prop1 = route.params.prop1;
  // 这里使用prop1
  return <View>{/* 组件内容 */}</View>;
}

后续如果需要更新这个props，可以调用navigation.setParams({ prop1: newPropValue })。

3. 高阶组件（HOC）批量传递props #

如果多个屏幕都需要传递相同的额外props，用HOC可以避免重复代码：

// 定义一个高阶组件
function withExtraProps(WrappedComponent, extraProps) {
  return (navigationProps) => (
    <WrappedComponent {...navigationProps} {...extraProps} />
  );
}

// 用HOC包装你的屏幕组件
const YourScreenWithProps = withExtraProps(YourScreenComponent, { prop1: prop1 });

// 在Tab导航中使用包装后的组件
<Tab.Navigator>
  <Tab.Screen
    name="YourScreen"
    component={YourScreenWithProps}
  />
</Tab.Screen>

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