React Native中跨屏幕传递JSON数据报错求助

嘿，我帮你梳理下React Native跨屏幕传递JSON数据时最容易踩的几个坑，你可以对照自己的代码逐一排查：

1. JSON未做序列化处理直接传递 #

如果你用React Navigation直接传递JSON对象，在部分场景（比如iOS深层导航、页面重启）下，可能会因为对象无法被导航系统正确序列化而抛出错误。

• 排查方向：检查你的跳转代码是不是直接把JSON对象塞到参数里：

  // 可能出错的写法
  navigation.navigate('TargetScreen', { jsonData: myRawJson });
  

• 解决方式：先把JSON转为字符串，到目标页再解析回来：

  // 数据获取页
  navigation.navigate('TargetScreen', { jsonStr: JSON.stringify(myRawJson) });
  
  // 目标页
  const { jsonStr } = route.params;
  const parsedData = JSON.parse(jsonStr);
  

2. 目标页参数获取方式错误 #

React Navigation v5+之后，页面参数是存在route.params而非navigation.params里，很多人搞混这两个对象导致拿不到数据报错。

• 排查方向：看目标页是不是用了错误的对象获取参数：

  // 错误写法
  const data = navigation.params.jsonData;
  

• 正确写法：

  import { useRoute } from '@react-navigation/native';
  
  function TargetScreen() {
    const route = useRoute();
    // 用可选链避免参数未传递时的崩溃
    const jsonData = route.params?.jsonStr;
    // ...后续处理
  }
  

3. JSON包含不可序列化的类型 #

如果你的JSON数据里有函数、循环引用、自定义类实例这类特殊类型，JSON.stringify会直接失败，导致数据传递中断。

• 排查方向：打印你要传递的JSON数据，检查是否存在特殊类型，比如日期对象虽然能被序列化，但会转成字符串；循环引用则会直接让stringify抛出错误。
• 解决方式：提前处理特殊类型：
  • 日期对象转成时间戳或ISO字符串；
  • 移除或转换函数；
  • 循环引用可以用专门的库（比如circular-json）处理后再序列化。

4. 导航路由名称不匹配 #

有时候报错看似是数据传递问题，实际是跳转时的路由名称和导航栈里注册的名称不一致（大小写敏感！）。

• 排查方向：检查导航栈配置里的屏幕名称，和你navigate调用里的名称完全一致吗？比如注册的是'UserProfile'，就不能写成'userprofile'。

5. 未处理参数缺失的情况 #

如果存在跳转时不传递数据的场景，目标页直接读取route.params.data会因为params为undefined而崩溃。

• 解决方式：添加参数存在性判断：

  // 方式1：可选链操作符
  const jsonData = route.params?.jsonStr;
  // 方式2：条件判断
  const jsonData = route.params ? route.params.jsonStr : null;
  

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