能否通过FlatList获取单个JSON对象？Expo Router场景方案问询

问题背景 #

使用Expo Router搭配React Native开发应用，通过FlatList渲染个人资料列表，点击列表项需跳转至对应详情页展示完整信息（包括数组类型的characteristics属性）。当前通过Pressable传递路由参数时，无法传递数组类型数据，页面结构如下：

app
  index.jsx
  _layout.jsx
  characters
    [uid].jsx
    _layout.jsx

解决方案 #

FlatList仅负责高效渲染列表，本身没有按key提取单个JSON对象的能力，推荐以下几种可行方案：

方法1：仅传递唯一ID，详情页匹配完整数据 #

这是最符合路由设计规范的方案，仅通过路由参数传递用户唯一标识（如id），详情页拿到ID后从数据源中匹配完整对象，支持获取任意类型的属性：

index.jsx 跳转代码

import { Pressable } from 'react-native';
import { router } from 'expo-router';

// 假设item为FlatList当前渲染的用户对象
<Pressable onPress={() => router.push(`/characters/${item.id}`)}>
  {/* 列表项内容，比如展示姓名 */}
</Pressable>

characters/[uid].jsx 详情页代码

import { View, Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
// 导入你的数据源（可以是本地JSON或API返回的数组）
const userList = require('../path/to/your/data.json').results;

export default function CharacterDetail() {
  const { uid } = useLocalSearchParams();
  // 根据ID匹配对应的用户对象
  const character = userList.find(item => item.id === uid);

  if (!character) {
    return <Text>用户不存在</Text>;
  }

  return (
    <View>
      <Text>{character.firstName} {character.lastName}</Text>
      <Text>年龄：{character.Age}</Text>
      {/* 展示数组类型的characteristics属性 */}
      <Text>头发颜色：{character.characteristics[0].hairColor}</Text>
      <Text>眼睛颜色：{character.characteristics[0].eyeColor}</Text>
    </View>
  );
}

方法2：通过Expo Router的state传递完整对象 #

Expo Router的router.push支持传递state参数，可携带任意类型数据（包括数组），无需依赖全局数据源直接传递完整对象：

index.jsx 跳转代码

<Pressable onPress={() => router.push({
  pathname: '/characters/[uid]',
  params: { uid: item.id }, // 仍传递ID作为 fallback
  state: { character: item } // 传递完整用户对象
})}>
  {/* 列表项内容 */}
</Pressable>

characters/[uid].jsx 详情页代码

import { View, Text } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
const userList = require('../path/to/your/data.json').results;

export default function CharacterDetail() {
  const router = useRouter();
  const { uid } = useLocalSearchParams();
  
  // 优先从state获取对象
  let character = router.state?.character;

  // 处理用户直接访问详情页URL的情况（state不存在）
  if (!character) {
    character = userList.find(item => item.id === uid);
    if (!character) return <Text>用户不存在</Text>;
  }

  return (
    <View>
      <Text>{character.firstName} {character.lastName}</Text>
      <Text>头发颜色：{character.characteristics[0].hairColor}</Text>
    </View>
  );
}

方法3：使用全局状态管理（适合复杂应用） #

如果应用数据需要多页面共享，可使用Zustand、Redux等状态管理库存储用户列表，详情页直接从状态中获取对应数据：

1. 创建状态管理Store（以Zustand为例）

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

export const useCharacterStore = create((set) => ({
  characters: [],
  setCharacters: (data) => set({ characters: data }),
  getCharacterById: (id) => {
    return useCharacterStore.getState().characters.find(item => item.id === id);
  }
}));

2. index.jsx 初始化数据并跳转

import { useEffect } from 'react';
import { FlatList, Pressable, Text } from 'react-native';
import { router } from 'expo-router';
import { useCharacterStore } from '../stores/characterStore';
const userList = require('../path/to/your/data.json').results;

export default function Home() {
  const setCharacters = useCharacterStore(state => state.setCharacters);

  useEffect(() => {
    // 初始化用户数据到状态
    setCharacters(userList);
  }, []);

  const renderItem = ({ item }) => (
    <Pressable onPress={() => router.push(`/characters/${item.id}`)}>
      <Text>{item.firstName} {item.lastName}</Text>
    </Pressable>
  );

  return <FlatList data={userList} renderItem={renderItem} keyExtractor={item => item.id} />;
}

3. characters/[uid].jsx 详情页获取数据

import { View, Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { useCharacterStore } from '../stores/characterStore';

export default function CharacterDetail() {
  const { uid } = useLocalSearchParams();
  const getCharacterById = useCharacterStore(state => state.getCharacterById);
  const character = getCharacterById(uid);

  if (!character) return <Text>用户不存在</Text>;

  return (
    <View>
      <Text>{character.firstName} {character.lastName}</Text>
      <Text>头发颜色：{character.characteristics[0].hairColor}</Text>
    </View>
  );
}

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