react-native - 使用 react-navigation 隐藏 url 中的路由参数

Question

我正在将 ReactNative 移动应用程序改编为 ReactNative Web。该应用程序已完成 react-navigation .
目前，每次我设置路由的参数(通过 navigate 或 setParams )时，这些参数都会显示在 URL 中。我最终得到了像这样看起来很糟糕的 URL:http://localhost:19006/me/undefined?user=%5Bobject%20Object%5D或者 URL 包含与用户无关的数据，通常看起来很乱。
有没有办法不显示 URL 中的路由参数？

Answer 1

如果您不想在 URL 中包含这些数据，您应该重新考虑 params 是否适合放置这些数据。您认为 URL 包含不相关数据表明该数据不属于导航状态。
如果您直接从 URL 访问屏幕，它的呈现方式应该与您以编程方式导航到它时的呈现方式相同。如果您在 params 中传递某些内容，则意味着屏幕需要该信息才能正确呈现，如果您将其从 URL 中删除，则该信息将丢失。考虑可以直接从 URL 打开页面，无论是在 Web 上还是使用深层链接。如果所需的数据不可用，那么它将无法工作。
在您的情况下，似乎您正在传递一个完整的用户对象(也许不是，没有代码就很难说)。理想情况下，这个对象应该在你的全局存储中而不是 params 中，并且你应该只在 params 中传递用户 ID。然后，您应该使用该 ID 从全局存储中获取完整对象，或者如果尚未获取对象(如果需要)则触发数据获取。
您没有在问题中指定 React Navigation 的版本。在 v5 中，您可以自定义如何将参数字符串化为 URL，以及如何使用 stringify 解析它们。和 parse选项:

const linking = {
  screens: {
    Profile: {
      path: 'user/:id',
      parse: {
        id: (id) => id.replace(/^@/, '')
      },
      stringify: {
        id: (id) => `@{id}`,
      },
    },
  },
};

这应该可以帮助您使 URL 看起来更漂亮，并处理参数不是简单字符串的情况。但是，您不能完全从 URL 中省略参数，因为它们是屏幕呈现的必要数据。
更多详情: https://reactnavigation.org/docs/configuring-links#passing-params