有没有办法在 react-navigation/native 中获取 URL 中的哈希？答案

【问题标题】：Is there a way to get hash in URL in react-navigation/native?有没有办法在 react-navigation/native 中获取 URL 中的哈希？
【发布时间】：2022-10-23 01:10:39
【问题描述】：

我正在为我的“react-native”前端路由使用“react-navigation”，并且我有“Amazon Cognito”重定向到我的应用程序的路径：

/loginredirect#id_token=sometoken

我需要一种让前端读取“令牌”并采取相应行动的方法。

但问题是, react-navigation 似乎会立即将路由更改为默认路由，即使 /loginredirect 是某些路由的已定义路径。

我需要某种方法来获取 react-navigation 以将 URL 中的哈希识别为有效路径，然后获取该哈希。有谁知道这是否可能？

【问题讨论】：

标签： reactjs react-native react-navigation amazon-cognito

【解决方案1】：

重置用户密码时，我对另一个第三方服务也有同样的问题。我仍然没有找到解决方案，但我注意到 react-navigation 不会将 url 片段“#”视为特殊字符。相反，它会尝试将初始 url 与配置对象中配置的路径进行比较。

例如，如果您将屏幕的路径配置为“/loginredirect#id_token=sometoken”而不是配置对象中的“/loginredirect”，您的应用程序将在正确的屏幕上打开。

const config = {
  screens: {
    Auth: {
      screens: {
        Login: 'loginredirect#id_token=sometoken',
      },
    },
  },
};

问题是 id_token 是不可预测的，因此不可能硬编码这个值。

我尝试在链接对象中使用订阅参数，但它仅在应用程序已经打开时才有效：

const linking: LinkingOptions<RootStackParamList> = {
    prefixes,
    config,
    subscribe(listener) {
      const onReceiveURL = ({ url }: { url: string }) => listener(url);

      // Listen to incoming links from deep linking
      const subscription = Linking.addEventListener('url', onReceiveURL);

      // Get the inital URL
      // Call the listener to let React Navigation handle the formatted URL
      Linking.getInitialURL().then((value) => {
        if (value != null) {
          if (value.includes('#')) {
            const newUrl = value.substring(0, value.indexOf('#'));
            listener(newUrl);
          }
        }
      });

      // Clean up the event listeners
      return () => subscription.remove();
    },
  };

我仍在寻找处理此案的正确方法...

【讨论】：