有没有办法在react-navigation/native中获取URL中的哈希值?

mf98qq94  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(178)

我正在使用“react-navigation”作为“react-native”前端路由,我让“Amazon Cognito”重定向到我的应用,路径为:
/loginredirect#id_token=sometoken
并且我需要一种前端读取“token”并相应地采取行动的方法。

但问题是,即使/loginredirect是某个路由的已定义路径,React导航似乎也会立即将路由更改为默认路由。

我需要一些方法来让react-navigation识别URL中的哈希值为有效路径,然后获取该哈希值。有人知道这是否可行吗?

xmd2e60i

xmd2e60i1#

React-navigation不会将url片段“#”视为特殊字符。相反,它会尝试将初始url与配置对象中配置的路径进行比较。例如,如果您将屏幕路径配置为“/loginredirect#id_token=sometoken”,而不是配置对象中的“/loginredirect”,则应用将在右侧屏幕打开。
若要使用path /loginredirect打开React导航,您需要通过将“#”替换为“?”来解析链接URL。您可以在应用程序使用初始URL打开时使用getInitialURL函数,并在应用程序打开时使用subscribe函数来侦听任何链接URL。

const prefixes = ['myapp://', 'https://myapp.com'];

    const config = {
      screens: {
        Login: 'loginredirect',
    };
    
    const parseUrl = (url) => {
      let parsedUrl = url;
      if (url.includes('#')) {
        parsedUrl = url.replace('#', '?');
      }
      return parsedUrl;
    };

    const getInitialURL = async () => {
      const url = await Linking.getInitialURL();
    
      if (url != null) {
        return parseUrl(url);
      }
    
      return url;
    };
    
    const subscribe = (listener) => {
      const onReceiveURL = ({ url }) => {
        listener(parseUrl(url));
      };
      const subscription = Linking.addEventListener('url', onReceiveURL);
    
      return () => {
        subscription.remove();
      };
    };
    
    const linking = {
      prefixes,
      config,
      getInitialURL,
      subscribe,
    };
    
    <NavigationContainer linking={linking}>
      ...
    </NavigationContainer>

参数将在路线中可用。屏幕参数

相关问题