React Native点击Tab.Screen时如何向标签页传递参数/对象

React Navigation 底部标签导航默认不会自动透传父级参数，直接给Tab.Screen绑定component属性时，常规navigate传参不会在Tab切换时自动注入，以下是3种可直接运行的实现方式，可按需选择。

方案1：自定义渲染注入固定参数（适配现有代码的最小修改方案） #

如果要传递的是父级MainContainer已经拿到的固定data对象，不需要动态变更，直接把Tab.Screen的component属性替换为children回调，手动向页面注入参数即可，不会破坏导航原有状态。

修改后完整代码 #

const Tab = createBottomTabNavigator();

function MainContainer({ route, navigation  }) {
  // 加载图标字体
  const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
  const { data } = route.params;
    
  console.log('data:');
  console.log(data);
    
  if (!fontsLoaded) {
    return <AppLoading />;
  }
    
  return (
      <Tab.Navigator
                initialRouteName={projectsName}
                screenOptions={({ route }) => ({
                  headerShown: false,
                  tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let rn = route.name;

                    if (rn === projectsName) {
                      iconName = 'PROJEKTE_ALLE';
                    } else if (rn === waermeschutzName) {
                      iconName = 'HAUS_3';
                    } else if (rn === begehungenName) {
                      iconName = 'NOTIZ_ERSTELLEN';
                    }

                    return <Icon name={iconName} size={43} color={color} />;
                  },
                  tabBarActiveTintColor: '#4283b1',
                  tabBarInactiveTintColor: '#5db8bd',
                  tabBarStyle:{ paddingTop:4, height:90 },
                  tabBarLabelStyle:{ paddingTop:3, fontSize:13 }
                })}>
                {/* 用children回调替换原component属性，直接注入参数 */}
                <Tab.Screen name={projectsName}>
                  {() => <ProjectsScreen data={data} />}
                </Tab.Screen> 
                <Tab.Screen name={waermeschutzName}>
                  {() => <WaermeschutzScreen data={data} />}
                </Tab.Screen>
                <Tab.Screen name={begehungenName}>
                  {() => <BegehungenScreen data={data} />}
                </Tab.Screen>
                    
      </Tab.Navigator>
  );
}

export default MainContainer;

目标页面取值方式 #

在对应Tab页面中直接通过props获取即可，不需要从route.params中读取：

function ProjectsScreen(props) {
  const { data } = props;
  // 直接使用data即可
}

方案2：监听Tab点击事件动态传参 #

如果需要在点击Tab时动态传递参数（比如根据当前页面状态传不同值），可以给对应Tab.Screen添加tabPress事件监听，阻止默认跳转后手动调用navigate传参。

代码示例 #

<Tab.Screen 
  name={projectsName} 
  component={ProjectsScreen}
  listeners={({ navigation }) => ({
    tabPress: (e) => {
      // 阻止默认Tab切换行为
      e.preventDefault();
      // 手动跳转并传入参数
      navigation.navigate(projectsName, { 
        data: data,
        // 其他需要传递的动态参数
      });
    },
  })}
/>

其他Tab页面同理添加监听即可，这种方式下目标页面直接从路由参数取值：

function ProjectsScreen({ route }) {
  const { data } = route.params;
}

方案3：Context全局共享参数（适合多Tab共用同一份数据场景） #

如果所有Tab页面都需要访问同一份data，可以用React Context做全局透传，不需要给每个Tab.Screen单独写传参逻辑。

1. 先创建共享Context

import { createContext, useContext } from 'react';
const SharedDataContext = createContext(null);
// 封装自定义hook方便调用
export const useSharedData = () => useContext(SharedDataContext);

2. 在MainContainer中包裹Tab导航

return (
  <SharedDataContext.Provider value={data}>
    <Tab.Navigator {/* 原有配置不变 */}>
      {/* 原有Tab.Screen不需要修改传参逻辑 */}
      <Tab.Screen name={projectsName} component={ProjectsScreen} /> 
      <Tab.Screen name={waermeschutzName} component={WaermeschutzScreen} />
      <Tab.Screen name={begehungenName} component={BegehungenScreen} />
    </Tab.Navigator>
  </SharedDataContext.Provider>
)

3. 任意Tab页面取值

import { useSharedData } from './MainContainer'; // 按实际路径引入
function ProjectsScreen() {
  const data = useSharedData();
  // 直接使用data
}

避坑提示 #

• 禁止直接写component={ProjectsScreen(data)}这类传参方式，会导致页面每次渲染都重新创建组件实例，丢失页面状态、触发不必要的重渲染。
• Tab页面之间互相跳转传参时，直接调用navigation.jumpTo('目标Tab名', { 参数: 值 })即可，目标页从route.params取值。

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