React Native中如何从不同页面访问props数据？

代码调整步骤 #

1. 修正组件入参写法
   React函数组件仅接收唯一的props入参，你现在写的第二个参数{navigation}属于无效写法，无法拿到对应值。直接在第一个props参数中解构你需要的属性即可：

export default function HomeScreen({ navigation, route, extraData }) {
  // 内部业务逻辑
}

2. 兼容两种来源的user数据

• 从App.js透传的user直接通过extraData属性获取
• 从navigation.navigate携带的参数统一存放在route.params对象中，加可选链避免无参数场景下的报错
  你可以根据业务优先级决定优先取哪个来源的值，示例代码如下：

// 优先取跳转携带的user，无值时使用App.js透传的user
const user = route.params?.user ?? extraData

补充说明 #

如果是全局通用的登录用户信息，更推荐用React Context或者轻量状态管理库（如Zustand）统一存储，避免同一份数据通过多途径传递导致的数据不一致问题，这也是React Native官方推荐的全局状态处理方案。

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