React-Native中react-navigation版本差异致跨屏传JS对象失败求助

嘿，我明白你跨设备迁移React Native项目时遇到的头疼问题了——同一套代码在Windows用老版本react-navigation好好的，到Mac换了3.0版本就卡在参数传递上了。我来帮你拆解解决方案：

关于你问的「锁定版本+复制文件夹」方案 #

理论上可行，但不建议直接复制react-navigation文件夹。更好的做法是直接修改Mac端项目的package.json，把react-navigation的版本明确写成"react-navigation": "2.18.3"，然后执行npm install或者yarn install。这样npm/yarn会自动帮你安装和Windows端完全一致的版本，避免手动复制文件夹可能带来的依赖缺失、系统编译差异等隐性问题。如果非要复制文件夹，大概率会踩更多坑，所以优先选修改版本后重新安装的方式。

不想回退版本？适配React Navigation 3.x的可行方案 #

如果你想留在3.x版本，那问题出在3.x对导航参数的序列化逻辑比2.x更严格，它默认期望传递的是可序列化的简单类型，而你直接传了对象数组。试试下面几个办法：

1. 用JSON序列化/反序列化传递对象 #

这是最直接的 workaround，把对象转成字符串传递，接收时再转回来：

// 跳转时的代码修改
<View>
  <Button 
    backgroundColor='grey' 
    title='View Complete Data Center List' 
    onPress={() => {
      this.props.navigation.navigate('Datacenters', { 
        DCdata: JSON.stringify(this.state.data)
      }); 
    }} 
  />
</View>

// 接收页面的代码修改
const { navigation } = this.props;
const datacenterdata = JSON.parse(navigation.getParam('DCdata', '[]')); // 加默认空数组避免解析失败
return (
  <ScrollView>
    <List>
      { datacenterdata.map((item, i) => (
        <ListItem 
          key={i} 
          title={item.Datacenter} 
          onPress={() => {
            this.props.navigation.navigate('Details', { 
              temp: item.Temp, 
              humid: item.Humid, 
              dc: item.Datacenter, 
            }); 
          }} 
        />
      )) }
    </List>
  </ScrollView>
)

2. 检查参数获取方式与数据有效性 #

React Navigation 3.x推荐在getParam里加默认值兜底，避免数据未传递时出现undefined报错。另外跳转前最好先确认this.state.data的类型：

// 跳转前先打印确认数据
onPress={() => {
  console.log('待传递的数据:', this.state.data); // 确保是数组而非undefined
  this.props.navigation.navigate('Datacenters', { DCdata: this.state.data}); 
}}

接收时加上默认值：

const datacenterdata = navigation.getParam('DCdata', []);

3. 检查依赖兼容性 #

React Navigation 3.x需要搭配特定版本的react-native-gesture-handler、react-native-reanimated等依赖，如果你Mac端新项目的这些依赖版本和Windows端2.x的不匹配，也可能导致参数传递异常。可以查看3.x的官方版本要求，确保所有相关依赖都安装了正确的版本。

4. 清除Expo缓存 #

Mac端的Expo可能有缓存残留，试试执行：

expo r -c

然后重新启动项目，很多奇怪的兼容性问题都能通过清缓存解决。

总结 #

• 想快速对齐Windows端：修改package.json锁定react-navigation为2.18.3，重新安装依赖即可。
• 想升级到3.x：优先尝试JSON序列化参数的方式，同时检查数据有效性和依赖兼容性。

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