使用React-Navigation深链接时如何将参数封装为对象传递

你可以使用React Navigation深链接配置中的transform配置项实现需求，该配置会在所有参数经过parse解析完成后执行，可自定义修改最终输出到route.params的结构。

修改后的完整配置代码： #

prefixes: [Linking.makeUrl('/'), 'https://test.app', 'https://*.test.app'],
config: {
  screens: {
    App: {
      screens: {
        Chat: {
          path: 'chat/:firstName/:lastName/:birthdate',
          parse: {
            firstName: (firstName: string) => decodeURIComponent(firstName),
            lastName: (lastName: string) => decodeURIComponent(lastName),
            birthdate: (birthdate: string) => decodeURIComponent(birthdate),
          },
          // 新增transform配置组装userObject
          transform: (params: Record<string, any>) => {
            const { firstName, lastName, birthdate, ...otherParams } = params
            return {
              ...otherParams,
              userObject: {
                firstName,
                lastName,
                birthdate
              }
            }
          }
        }
      }
    }
  }
}

注意事项： #

• transform配置仅在React Navigation 6.x及以上版本支持，若使用更低版本，可在页面拿到route.params后手动组装userObject对象使用。
• 配置完成后可直接在Chat页面通过const { userObject } = route.params获取封装后的用户参数。

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