React Navigation参数传递为空，如何正确传参至Review页面？

以下是针对你遇到的参数传递问题的排查和解决步骤，都是React Navigation 6栈导航中最常见的问题点：

1. 检查导航栈的注册配置 #

确保ReviewScreen在Stack Navigator中的注册名称和你跳转时使用的"Review"完全一致（大小写敏感），这是最容易踩的坑：

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 这里的name必须和navigate的目标名称完全匹配 */}
      <Stack.Screen name="Review" component={ReviewScreen} />
    </Stack.Navigator>
  );
}

2. 确保组件正确接收route props #

很多时候是因为ReviewScreen没有正确接收route参数，导致解构时出错。正确的组件写法：

// 正确：接收route作为组件props
function ReviewScreen({ route, navigation }) {
  // 用可选链+默认值避免参数不存在时触发错误
  const { title } = route.params || {};
  return <Text>{title || '默认标题'}</Text>;
}

错误示例（遗漏route参数）：

// 错误：未接收route props，直接解构会报错
function ReviewScreen() {
  const { title } = route.params; 
  return <Text>{title}</Text>;
}

3. 确认跳转调用的语法正确性 #

检查navigation.navigate的参数是否是合法对象，避免拼写错误（比如把title写成tilte）：

// HomeScreen中的跳转代码
function HomeScreen({ navigation }) {
  return (
    <Button
      title="跳转到Review页面"
      onPress={() => navigation.navigate("Review", { title: "Title Name" })}
    />
  );
}

4. 嵌套导航场景的特殊处理 #

如果ReviewScreen属于嵌套导航器的一部分，需要通过完整路径传递参数：

// 假设ReviewScreen在名为RootStack的嵌套栈中
navigation.navigate('RootStack', { 
  screen: 'Review', 
  params: { title: 'Title Name' } 
});

5. 调试技巧 #

• 在跳转前打印参数，确认参数本身存在：

  onPress={() => {
    const params = { title: "Title Name" };
    console.log('待传递参数:', params);
    navigation.navigate("Review", params);
  }}
  

• 在ReviewScreen开头打印route对象，直观查看参数是否被传递：

  function ReviewScreen({ route }) {
    console.log('当前Route对象:', route);
    // ...后续逻辑
  }
  

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