React Navigation 6.x 首页向二级页传参返回undefined问题咨询

问题原因 #

你在App.js中为栈路由注册的是自行封装的HomeScreen、OtherScreen中间层组件，React Navigation 会默认将navigation、route等路由参数传递给你注册到Stack.Screen的组件，但你没有将这些参数透传给内部实际渲染的Home、Second业务组件，因此第二个页面无法拿到传递的参数。

解决方案 #

方案1（最简便，推荐）：删除多余的中间包装层，直接注册业务组件

修改App.js代码，删除HomeScreen、OtherScreen两个多余的包装函数，直接将业务组件传给Stack.Screen：

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './App/screens/home';
import Second from './App/screens/second';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ title: 'Overview' }} 
          />
          <Stack.Screen
            name="Second"
            component={Second}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
};

export default App;

方案2：保留中间包装层，透传路由参数

如果你有特殊需求需要保留中间的包装组件，将路由参数透传给内部业务组件即可：

// App.js 中修改两个包装函数
function HomeScreen(props) {
  return <Home {...props} />;
}

function OtherScreen(props) {
  return <Second {...props} />;
}

可选优化：用useRoute钩子获取参数（更稳定，React Navigation 6.x 推荐） #

如果不希望依赖props传递，你可以在Second页面直接用useRoute钩子拿参数，无需关注上层props透传逻辑：

// Second页面顶部导入钩子
import { useNavigation, useRoute } from '@react-navigation/native';

const Second = () => {
  const route = useRoute();
  // 直接获取参数
  console.log(route.params?.name)
  
  // 剩下的逻辑不变
}

修改后你就可以通过route.params.name拿到传递的John Doe参数了。

内容的提问来源于stack exchange，提问作者Joe Jo's