React Native中如何向其他屏幕传递非可序列化对象？

以下是几种符合你需求的实现方式，无需依赖params、Redux或Context：

• 直接通过导航传参（React Navigation 5+）
  React Navigation支持直接传递非序列化对象作为导航参数，虽然这部分参数不支持深度链接，但刚好匹配你的场景。这种方式下对象不会被序列化，直接作为props传递给目标屏幕：

  // 源屏幕跳转逻辑
  navigation.navigate('TargetScreen', { formData: yourNonSerializableFormData });
  
  // 目标屏幕接收参数
  const TargetScreen = ({ route }) => {
    const formData = route.params.formData;
    // 处理表单数据
    return <View>{/* 你的UI */}</View>;
  };
  

  注意：如果目标屏幕可能被多次实例化，建议在组件卸载时手动清理该对象，避免潜在的内存泄漏。

• 自定义临时内存缓存
  创建一个轻量的全局缓存模块，临时存储非序列化对象，跳转时仅传递唯一标识，目标屏幕通过标识获取数据后立即删除缓存，避免长期内存占用：

  // cache.js 全局缓存模块
  const tempCache = new Map();
  
  export const setTempData = (key, data) => tempCache.set(key, data);
  export const getTempData = (key) => {
    const data = tempCache.get(key);
    tempCache.delete(key); // 取完即删
    return data;
  };
  
  // 源屏幕
  import { setTempData } from './cache';
  const tempKey = `form_${Date.now()}`;
  setTempData(tempKey, yourNonSerializableFormData);
  navigation.navigate('TargetScreen', { tempKey });
  
  // 目标屏幕
  import { getTempData } from './cache';
  const TargetScreen = ({ route }) => {
    const formData = getTempData(route.params.tempKey);
    // 处理表单数据
    return <View>{/* 你的UI */}</View>;
  };
  

  这种方式完全避开了导航参数的序列化限制，同时保持了代码的独立性，不依赖全局状态管理工具。

• 直接传递React元素（特定场景）
  如果你的表单数据包含组件实例这类完全不可序列化的内容，可以直接将封装好的React元素作为参数传递，目标屏幕直接渲染该元素：

  // 源屏幕
  navigation.navigate('TargetScreen', {
    formComponent: <YourForm data={yourNonSerializableFormData} />
  });
  
  // 目标屏幕
  const TargetScreen = ({ route }) => {
    return route.params.formComponent;
  };
  

  这种方式适合UI绑定紧密的场景，但灵活性较低，仅推荐在特定需求下使用。

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