React Navigation参数自定义JSON解析及序列化机制疑问

一、为 React Navigation 配置 JSON.parse 的 reviver 函数 #

完全可以通过 React Navigation 导航容器的 serializer 配置项，自定义整套序列化和反序列化逻辑，包括指定 parse 阶段的 reviver 函数：

1. 全局配置导航容器的序列化规则

import { NavigationContainer } from '@react-navigation/native';
import dayjs from 'dayjs';

const navigationSerializer = {
  stringify: (state) => {
    // 自定义序列化逻辑，标记并转换 Dayjs 对象
    return JSON.stringify(state, (key, value) => {
      if (value instanceof dayjs) {
        return { _type: 'Dayjs', value: value.toISOString() };
      }
      return value;
    });
  },
  parse: (json) => {
    // 配置 reviver 函数，还原序列化后的 Dayjs 对象
    return JSON.parse(json, (key, value) => {
      if (typeof value === 'object' && value?._type === 'Dayjs') {
        return dayjs(value.value);
      }
      return value;
    });
  },
};

// 在 NavigationContainer 中应用该序列化配置
export default function App() {
  return (
    <NavigationContainer serializer={navigationSerializer}>
      {/* 你的导航栈/底部导航等组件 */}
    </NavigationContainer>
  );
}

2. 局部参数解析简化方案
   如果不想全局配置，也可以在目标屏幕中手动解析参数：

// 目标屏幕组件
import dayjs from 'dayjs';

function TargetScreen({ route }) {
  // 手动将参数中的序列化 Dayjs 数据还原
  const targetDate = route.params?.date ? dayjs(route.params.date) : null;
  // 业务逻辑处理...
}

二、React Navigation 为何要序列化导航参数，而非直接存储内存对象 #

1. 状态持久化需求：当 App 被杀死重启、或从后台恢复时，序列化后的导航状态可持久化存储（比如存在 AsyncStorage），从而完整恢复之前的导航栈和参数状态。如果直接存内存对象，App 重启后这些数据会完全丢失。
2. 调试工具兼容性：Expo Go 的调试工具（如 React DevTools）依赖可序列化状态来追踪展示数据变化，非可序列化对象会导致调试工具无法正常解析状态，进而抛出警告。
3. 避免引用副作用：直接传递内存对象属于引用类型传递，修改参数可能会意外影响其他页面的状态。序列化相当于做了一次深拷贝，确保每个页面拿到的参数都是独立副本。
4. 跨环境一致性：React Navigation 支持多平台（iOS、Android、Web 等），序列化后的 JSON 数据在不同平台下表现一致，而内存对象的序列化行为可能因平台或 JS 引擎差异出现不一致。
5. 底层状态机制要求：React Navigation 内部的状态管理（无论是自身实现还是基于 Redux 等第三方库）通常要求状态可序列化，这样才能保证状态更新的可追踪性和可预测性。

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