Question

我正在创建基于React Native的电子商务应用程序。在这里，我需要从URL共享打开单个产品页面。实际上，当应用程序处于终止状态时它会工作，但是如果应用程序处于后台/非活动状态则不会工作。在后台/非活动状态下打开时，共享网址为空。我已附加了代码。

pystan.StanModel

当我从whatsapp和处于后台状态的应用程序打开外部链接时，Linking.getInitialURL（）接收为null ..

以下是清单文件中的内容

// following code working for app killing state

componentWillMount() {

    if (Platform.OS === 'android') {
      console.log("Testing");debugger

      //Constants.OneTimeFlag == false;
          Linking.getInitialURL().then(url => {
            console.log(url);
            var str = url
            var name = str.split('/')[4]
            Constants.isLinking = true;
           this.setState({ shop_Id: name})


           if (str)
           {
            this.setState({ isFromHomeLinking:'FROM_LINK' })
            this.props.navigation.navigate('SingleProductScreen', { ListViewClickItemHolder: [this.state.shop_Id,1,this.state.isFromHomeLinking] });

           }


          });

    }

    else {
        Linking.addEventListener('url', this.handleNavigation);
      }

  }

Not working code following..



componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
}

componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

this.state.appState declared in constructor(props)

_handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
     console.log('App has come to the foreground!');debugger
 if (Platform.OS === 'android') {
          console.log("Testing");debugger

          //Constants.OneTimeFlag == false;
              Linking.getInitialURL().then(url => {
                console.log(url);
                var str = url
                var name = str.split('/')[4]
                Constants.isLinking = true;
               this.setState({ shop_Id: name})


               if (str)
               {
                this.setState({ isFromHomeLinking:'FROM_LINK' })
                this.props.navigation.navigate('SingleProductScreen', { ListViewClickItemHolder: [this.state.shop_Id,1,this.state.isFromHomeLinking] });

               }


              });

        }

        else {
            Linking.addEventListener('url', this.handleNavigation);
          }
    }
    }

以下是我的示例网址。

http://demo1.zgroo.com/xxxx

请告诉我任何解决方法。

先谢谢了。

Answer 1

这是Anurag用钩子回答的版本：

export function useDeepLinkURL() {
  const [linkedURL, setLinkedURL] = useState<string | null>(null);

  // 1. If the app is not already open, it is opened and the url is passed in as the initialURL
  // You can handle these events with Linking.getInitialURL(url) -- it returns a Promise that
  // resolves to the url, if there is one.
  useEffect(() => {
    const getUrlAsync = async () => {
      // Get the deep link used to open the app
      const initialUrl = await Linking.getInitialURL();
      setLinkedURL(decodeURI(initialUrl));
    };

    getUrlAsync();
  }, []);

  // 2. If the app is already open, the app is foregrounded and a Linking event is fired
  // You can handle these events with Linking.addEventListener(url, callback)
  useEffect(() => {
    const callback = ({url}: {url: string}) => setLinkedURL(decodeURI(url));
    Linking.addEventListener('url', callback);
    return () => {
      Linking.removeEventListener('url', callback);
    };
  }, []);

  const resetURL = () => setLinkedURL(null);

  return {linkedURL, resetURL};
}

然后可以将其用于：

const {linkedURL, resetURL} = useDeepLinkURL();

useEffect(() => {
    // ... handle deep link
    resetURL();
}, [linkedURL, resetURL])

我添加了功能resetURL，因为如果用户与该应用共享两次相同的文件，则需要将其加载两次。但是，由于深层链接最终将是相同的，因此不会再次触发useEffect。您可以通过将linkedURL设置为null来再次触发它，因此，下次共享文件时，可以确定它将导致useEffect运行。

此外，我使用decodeURI来解码传入的URL，因为如果您使用react-native-fs之类的库从指定路径加载文件，它将无法处理带空格的文件除非您使用decodeURI。否则

Answer 2

在这种情况下，您需要注册链接侦听器。

componentDidMount() {
  Linking.addEventListener('url', this._handleOpenURL);
},
componentWillUnmount() {
  Linking.removeEventListener('url', this._handleOpenURL);
},
_handleOpenURL(event) {
  console.log(event.url);
}

更多https://facebook.github.io/react-native/docs/linking

Answer 3

从componentwillunmount中删除侦听器。无需在componentwillunmount中编写任何代码，因为链接addListener始终会监听，只有当您从后台（通过单击新的Deeplink）进入活动状态时，才会触发。

当应用程序处于后台状态时，深层链接不起作用

3 个答案: