如何使用router.navigate()传递嵌套对象数组（Expo Router）

DevOps 小满

2026-6-30

解决expo-router传递嵌套对象数组的问题

问题原因

expo-router的导航参数默认会被序列化为URL兼容格式，嵌套对象数组无法被正确序列化，导致接收时呈现为[object Object]。

解决方案

方案1：JSON序列化/反序列化传递

跳转前将对象转为JSON字符串，接收页面再解析回原对象：

跳转页面代码：

import { router } from 'expo-router';

const handleNavigate = () => {
  const serializedItem = JSON.stringify(item);
  router.navigate({
    pathname: 'path/to/screen',
    params: { item: serializedItem }
  });
};

目标页面接收代码：

import { useLocalSearchParams } from 'expo-router';

const TargetScreen = () => {
  const { item } = useLocalSearchParams();
  const parsedItem = item ? JSON.parse(item) : null;

  // 此时可正常访问parsedItem.nestedObjectArray
  return (
    // 页面内容
  );
};

方案2：全局状态管理

若数据复杂或需多页面共享，推荐用状态管理工具（如Zustand、React Context）：

以Zustand为例：

安装依赖：npm install zustand
创建状态存储：

// stores/itemStore.js
import { create } from 'zustand';

export const useItemStore = create((set) => ({
  currentItem: null,
  setCurrentItem: (item) => set({ currentItem: item })
}));

跳转前存入状态：

import { useItemStore } from '../stores/itemStore';
import { router } from 'expo-router';

const handleNavigate = () => {
  const setCurrentItem = useItemStore(state => state.setCurrentItem);
  setCurrentItem(item);
  router.navigate('path/to/screen');
};

目标页面读取状态：

import { useItemStore } from '../stores/itemStore';

const TargetScreen = () => {
  const currentItem = useItemStore(state => state.currentItem);

  // 直接使用currentItem，嵌套数组可正常访问
  return (
    // 页面内容
  );
};