使用 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官方文档：

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

这里提到

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

希望这可以帮助。