React Navigation v6：如何向Tab Navigator传递任意props？

下面提供三种实用的实现方式，你可以根据场景选择：

方法1：通过initialParams统一传递 #

在Tab.Navigator的screenOptions中配置initialParams，所有子屏幕都会自动继承这个参数。

<Tab.Navigator
  screenOptions={{
    initialParams: { prop1: '你的目标参数值' }
  }}
>
  <Tab.Screen name="Screen1" component={Screen1} />
  <Tab.Screen name="Screen2" component={Screen2} />
</Tab.Navigator>

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

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

方法2：用包装组件传递Props #

如果需要传递动态变化的参数，或者要保留导航自带的props，可以用匿名组件包裹目标屏幕，直接传入prop1。

<Tab.Navigator>
  <Tab.Screen 
    name="Screen1" 
    component={(navProps) => <Screen1 {...navProps} prop1="你的目标参数值" />} 
  />
  <Tab.Screen 
    name="Screen2" 
    component={(navProps) => <Screen2 {...navProps} prop1="你的目标参数值" />} 
  />
</Tab.Navigator>

这种方式下，屏幕组件可以直接从props中读取：

function Screen1({ prop1 }) {
  // 在这里使用prop1
  return <View>{/* 组件内容 */}</View>;
}

方法3：使用React Context（全局共享场景） #

如果prop1需要在多个导航器或跨层级组件中共享，用Context更合适。

首先创建Context工具：

import { createContext, useContext } from 'react';

const PropContext = createContext();

export function PropProvider({ children, prop1 }) {
  return (
    <PropContext.Provider value={prop1}>
      {children}
    </PropContext.Provider>
  );
}

export function useProp1() {
  return useContext(PropContext);
}

将Tab Navigator包裹在Provider中：

<PropProvider prop1="你的目标参数值">
  <Tab.Navigator>
    <Tab.Screen name="Screen1" component={Screen1} />
    <Tab.Screen name="Screen2" component={Screen2} />
  </Tab.Navigator>
</PropProvider>

最后在屏幕组件中通过自定义Hook获取：

import { useProp1 } from './PropContext';

function Screen1() {
  const prop1 = useProp1();
  // 在这里使用prop1
  return <View>{/* 组件内容 */}</View>;
}

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