使用 Expo Router 传递对象

Question

我需要使用

expo-router

将对象从一个屏幕传递到另一个屏幕

我有一个显示包含项目的 FlatList 的屏幕和一个显示有关该项目的更多信息的详细信息屏幕。附加信息位于项目对象内，因此无需再次调用 API。

物品型号如下：

{
  id: "123",
  title: "Some Title",
  imageURL: "https://...",
  ...other: "some other data"
}

使用 expo-router 我相信我需要提供 URL 参数，但是，对于包含图像 URL 的数据，这是不切实际的。

如何在没有 URL 参数的情况下传递对象

目前我在函数中得到的项目如下；

const getDetails = (item) => {
    router.push({ pathname: `/details/${item.id}`, params: { item } });
};

如何在第二个屏幕中显示此内容？

Answer 1

我自己也曾为此苦苦挣扎，但没有找到令人满意的解决方案。在您的情况下，您可以稍微更改推送下一个屏幕的代码：

router.push({ pathname: `/details/${item.id}`, params: item }); // Remove the braces in params

然后，按照 [id].tsx 文件中的示例，您将得到如下内容：

export default function ItemDetail() {
  const item = useLocalSearchParams();

  ...

}

item

对象将具有

params

参数的所有字段，加上路线之一（例如，如果路线是

/{id}

），它也将具有id字段。 不幸的是，由于 expo 会将每个字段作为 URL 中的查询参数传递，因此它是有限的：

• 您将无法传递嵌套对象（Item 中的字段不能是对象）
• 您将无法传递字段包含 URL 的对象（expo 会抱怨路由的格式）。
• 日期等字段类型将作为字符串发送。

这不是最好的解决方案。我还考虑过只是在路由中传递 id，并在组件内部从某些内存缓存中查询对象。

Answer 2

根据react-navigation官方文档：

我们应该将它们存储在全局存储中而不是导航状态。

这里提到了

链接中还提到了在导航状态下传递对象的缺点。

希望这有帮助。

Answer 3

当按照问题使用 expo-router 时，您可以使用 搜索参数 传递对象或任何其他数据，并使用

useLocalSearchParams

或

useGlobalSearchParams

在另一个屏幕上访问它们，如链接中所述。

示例：

如果我在一个屏幕上并且我想通过链接将一些数据发送到屏幕

/attendees

，下面是我使用过的片段

import { router } from 'expo-router'
import { TouchableOpacity, Text } from 'react-native'
...
<TouchableOpacity
    onPress={() => {
        const { id, name } = attendee
        router.push(
            `/attendees/check_in?id=${id}&name=${name}` as any
        )
    }}
    >
    <Text style={[styles.status, { color: '#f87171' }]}>
        Pending
    </Text>
</TouchableOpacity>

然后在 /attendees 屏幕中访问参数时

import { useLocalSearchParams } from 'expo-router'
...
const Attendee = () => {
  const { id, name } = useLocalSearchParams()
  console.log({id, name})

  ...
}

可能不是最好的例子，但希望它能帮助别人。

注意：这对于大于 49 的 expo sdk 可能有效。