React Native页面传值问题：HomeScreen数据无法在ReviewsScreen显示

问题根源 #

1. 参数传递格式错误：navigation.navigate的第二个参数需要是包含params的对象，你直接传入item导致参数未被正确识别。
2. 获取参数的API过时：getParam()是React Navigation 4及更早版本的方法，新版本（v5+）已移除，需改用route.params获取参数。

修正后的代码 #

HomeScreen（传参部分）

const HomeScreen = ({ navigation }) => {
  const [reviews, setReviews] = useState([ // 修正拼写错误：setRevies → setReviews
    { title: 'asd', rating: 5, body: 'dsa', key: '1'},
    { title: 'asdd', rating: 3, body: 'dsaa', key: '2'},
    { title: 'asddd', rating: 4, body: 'dsaaa', key: '3'},
  ]);

  return (
    <View style={styles.container}>
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          // 将item包装在params对象中，指定键名方便后续获取
          <TouchableOpacity onPress={() => navigation.navigate('Reviews', { review: item })}>
            <Text style={styles.text}>{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

ReviewsScreen（取参部分）

// 解构出route对象，新版本参数存储在route.params中
const ReviewsScreen = ({ route, navigation }) => {
  // 用可选链或默认值处理参数为空的情况，避免报错
  const { review } = route.params || {};

  return (
    <View style={styles.container}>
      {review && (
        <>
          <Text style={styles.text}>{review.title}</Text>
          <Text>评分：{review.rating}</Text>
          <Text>{review.body}</Text>
        </>
      )}
    </View>
  );
};

关键说明 #

• 传参必须遵循navigation.navigate('路由名', { 自定义键名: 数据 })的格式，确保参数被正确挂载到导航参数集合中。
• 新版本React Navigation中，屏幕组件会接收route和navigation两个props，所有传递的参数都存放在route.params内。
• 代码中顺便修正了setRevies的拼写错误，避免状态更新失效。

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