web-dev-qa-db-fra.com

La liaison profonde ne fonctionne pas lorsque l'application est en arrière-plan React native

je crée une application de commerce électronique basée sur Native.here J'ai besoin d'ouvrir une seule page de produit à partir de l'URL partagée. l'url de partage devient nulle lors de l'ouverture sur fond/état inactif. J'ai joint mon code.

// 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);
          }
    }
    }

lorsque j'ouvre un lien externe à partir de WhatsApp et de l'application en arrière-plan, Linking.getInitialURL () est reçu comme nul.

Après j'ai dans le fichier manifeste

<activity
        Android:name=".MainActivity"
        Android:label="@string/app_name"
        Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        Android:windowSoftInputMode="adjustResize"
        Android:launchMode="singleTask">
        <intent-filter>
            <action Android:name="Android.intent.action.MAIN" />
            <category Android:name="Android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
 <action Android:name="Android.intent.action.VIEW" />
<category Android:name="Android.intent.category.DEFAULT" />
 <category Android:name="Android.intent.category.BROWSABLE" />
<data Android:scheme="http"
 Android:Host="demo1.zgroo.com" />
</intent-filter>
      </activity>

voici mon exemple d'URL ..

http://demo1.zgroo.com/xxxx

Veuillez me faire savoir toutes les solutions ..

merci d'avance..

androidreact-nativedeep-linking
6
abdul sathar

Voici une version de la réponse d'Anurag utilisant des crochets:

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};
}

Vous pouvez ensuite l'utiliser avec:

const {linkedURL, resetURL} = useDeepLinkURL();

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

J'ai ajouté la fonction resetURL parce que si un utilisateur partage deux fois le même fichier avec l'application, vous voudrez le charger deux fois. Cependant, parce que le lien profond finirait par être le même, donc le useEffect ne serait pas déclenché à nouveau. Vous pouvez le déclencher à nouveau en définissant linkedURL sur null, de sorte que la prochaine fois qu'un fichier sera partagé, vous pouvez être sûr qu'il provoquera l'exécution de useEffect.

De plus, j'ai utilisé decodeURI pour décoder l'URL transmise car si vous utilisez une bibliothèque comme react-native-fs pour charger le fichier à partir du chemin spécifié, elle ne pourra pas gérer les fichiers avec des espaces dans leur sauf si vous utilisez decodeURI.

0
Eric Wiener