使用Expo Router传递对象

huangapple go评论82阅读模式
英文:

Passing Object Using Expo Router

问题

我需要使用 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 } });
};

如何在第二个屏幕中获取这个对象?

英文:

I need to pass an object from one screen to another using expo-router

I have a screen that shows a FlatList with items and a detail screen that would show more information about the item. The additional information is within the item object so another API call is not necessary.

The item model is as such:

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

using expo-router I believe I need to provide URL params, however, with the data that I have including an image URL it's not practical.

How do I go about just passing the object without URL parameters

Currently I get the item in a function as below;

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

How do I get this out in the second screen?

答案1

得分: 2

根据 react-navigation 官方文档:

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

在这里提到

在链接中也提到了将对象传递给导航状态的缺点。

希望这有所帮助。

英文:

According to the react-navigation official docs:

We should store them in a global store instead of the navigation state.

Mentioned here

The downsides of passing the object in the navigation state is also mentioned in the link.

Hope this helps.

答案2

得分: 1

我自己也曾经遇到过这个问题,我还没有找到令人满意的解决方案。在你的情况下,你可以稍微更改推送下一个屏幕的代码:

router.push({ pathname: `/details/${item.id}`, params: item }); // 在params中去掉大括号

然后,根据[id].tsx文件中的示例,你会得到类似这样的代码:

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

  ...

}

item 对象将拥有 params 参数的所有字段,以及路由的字段(例如,如果路由是 /{id},它也会有 id 字段)。
不幸的是,由于 Expo 会将每个字段作为 URL 中的查询参数传递,它有一些限制:

  • 你将无法传递嵌套对象(Item中的字段不能是对象)
  • 你无法传递字段中包含URL的对象(Expo将抱怨路由的格式)。
  • 诸如日期之类的字段类型将被发送为字符串。

这不是最好的解决方案。我想到的另一种方法是只传递路由中的id,在组件内部从某个内存缓存中查询对象。

英文:

I've struggled with this myself too, and I haven't found any satisfactory solution. In your case you could slightly change the code that pushes the next screen:

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

Then, following your example in the [id].tsx file you would have something like this:

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

  ...

}

The item object will have all the fields of the params parameter, plus the one of the route (e.g if the route is /{id}) it will have the id field as well.
Unfortunately, since expo will pass every field as a query parameter in the URL, it is limited:

  • You wont be able to pass nested objects (fields in Item can't be objects)
  • You won't be able to pass objects whose fields contain URLs (expo will complain about the format of the route).
  • Field types like dates will be sent as strings.

It's not the best solution. What I've also thought about is just passing the id in the route and inside the component query the object from some memory cache.

答案3

得分: -1

使用useLocalSearchParams来接收一个对象

const { item } = useLocalSearchParams();

查看传递参数给路由以获取完整示例。

英文:

Use useLocalSearchParams to receive an object

const { item } = useLocalSearchParams();

See Passing parameters to the routes for the full example.

huangapple
  • 本文由 发表于 2023年7月3日 19:24:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76604270.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定