React Native跨导航容器传递Flatlist项值返回undefined问题

问题核心原因 #

• 嵌套导航场景下，通过navigation.navigate传给父导航器（即代码中的MainNavigator Tab导航容器）的参数，不会自动暴露给导航器下的所有Tab子页面，也不会在导航器组件未做配置的情况下被正确捕获。
• 若MainNavigator在跳转前已经被挂载过（比如从认证栈登录后已经进入过一次主页），再次调用navigate('MainNavigator', params)时，React Navigation默认只会激活已存在的导航实例，不会自动把新参数同步到导航器根节点，直接解构route.params自然拿到undefined。
• 所有嵌套导航的参数传递，默认只会下发给对应导航器的初始路由页面，不会自动广播给导航器下的所有子屏幕。

可直接复用的实现方案 #

方案1：导航层参数透传（适配现有代码逻辑，改动最小） #

1. 先修改根Stack的注册配置，给MainNavigator加参数占位

// App.js 根Stack配置
<Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="SplashScreen">
  <Stack.Screen name="SplashScreen" component={SplashScreen} />
  <Stack.Screen name="AuthStack" component={AuthStack} />
  <Stack.Screen 
    name="MainNavigator" 
    component={MainNavigator}
    initialParams={{ nameChild: null }} // 加初始参数占位，避免首次加载报错
  />
  <Stack.Screen name="BarcodeScan" component={BarcodeScan} />
</Stack.Navigator>

2. 在MainNavigator（Tab导航容器）中接收父级参数，透传给所有Tab子页面

// MainNavigator 组件
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default function MainNavigator({ route }) {
  // 这里可以拿到父Stack传进来的参数
  const passedName = route.params?.nameChild;

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false, // 原有隐藏导航栏配置
        initialParams: { selectedName: passedName } // 把参数注入所有Tab页面的初始参数
      }}
    >
      {/* 原有注册的Tab子页面，按实际路由名替换 */}
      <Tab.Screen name="HomeTab" component={HomePage} />
      <Tab.Screen name="ListTab" component={ListPage} />
      <Tab.Screen name="ProfileTab" component={ProfilePage} />
    </Tab.Navigator>
  )
}

3. 所有Tab子页面直接从自身路由参数取值即可

// 任意Tab子页面，比如HomePage
export default function HomePage({ route }) {
  const { selectedName } = route.params || {};
  // 这里就能拿到FlatList传入的item.nameVal值
  return <View>{/* 页面逻辑 */}</View>
}

方案2：嵌套路由精准传参（适配MainNavigator已挂载的场景） #

如果跳转时MainNavigator已经在栈中存在，把FlatList里的跳转逻辑改成嵌套路由写法，直接指定要跳转的Tab页面并传参：

// FlatList renderItem里的onPress逻辑
onPress={() => {
  navigation.navigate('MainNavigator', {
    screen: 'HomeTab', // 替换为Tab导航的初始路由名
    params: { selectedName: item.nameVal }
  })
}}

如果需要把参数同步给所有Tab页面，配合方案1里的screenOptions透传逻辑，在MainNavigator里加参数监听即可。

方案3：全局状态存储（适合多页面频繁复用选中值的场景） #

如果选中的列表项值需要在多个非关联页面调用，不用走导航传参，直接用轻量全局方案存储：

• 点击FlatList项时，把item.nameVal存入React Context、Zustand等全局存储
• 所有Tab页面直接从全局存储读取值，完全不受导航层级、挂载状态影响，不会出现undefined问题

避坑提示 #

• 所有路由参数取值时建议加?.可选链或者空值兜底，避免首次加载未传参时直接抛出解构错误
• 不要指望嵌套导航器自动把父级参数广播给所有子页面，必须手动透传或者走全局状态
• 如果用navigation.replace跳转MainNavigator，参数逻辑和navigate一致，区别只是会清空当前栈历史，不会保留之前的页面返回栈

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