どのように反応ネイティブアプリケーションからの通知からの深いリンクを

深いリンクは、リンクは、外部のWebサイトやアプリケーションのホームページではなく、アプリケーションの経験の特定のポイントに直接ユーザーを送信するときです.
当初投稿ankitkumar.dev
あなたが記事を逃したならばHow to implement deep linking in React Native app with React Navigation v5 , 最初にやりなさい.

私たちは何を建てていますか。

最後の記事では、反応ナビゲーションv 5で反応ネイティブアプリケーションで深いリンクを実装する方法について学んだ.
この記事では、我々はどのように通知からアプリケーション内の深いリンクの内容を見ていきます.
我々は、以下の深いリンクを使用して、この深いリンクが通知で通知され、ユーザーが通知をタップするとどのように動作するかを参照してください.

demo://app/home/:id - この深いリンクはhome アプリの画面を渡すid param/propsとしてhome スクリーン

demo://app/profile/:id - この深いリンクはprofile アプリの画面を渡すid param/propsとしてprofile スクリーン

demo://app/notifications - この深いリンクはnotifications アプリの画面

demo://app/settings - この深いリンクはsettings アプリの画面

通知と深いリンクの実装の後、アプリは0 : 10でここに示されるように振る舞うでしょう.
すぐにいくつかのコードをしましょう!

プロジェクトの設定

私はあなたが既に深いリンクが統合される必要があるプロジェクトを持っていると仮定しています.
任意のプロジェクトを持っていない場合は、私は4つの画面で小さなアプリケーションを作成し、ここで0 : 05で説明している.

プロジェクト内の通知の設定

プロジェクトは既に作成されていますprevious article
私はアプリのローカル通知の4種類を設定している

スケジュールのローカル通知なし深いリンク

  const scheduleLocalNotification = () => {
    PushNotificationIOS.scheduleLocalNotification({
      alertBody: "Scheduled Local Notification",
      fireDate: new Date(new Date().valueOf() + 2000).toISOString(),
    });
  };

プロフィール画面への深いリンク

  const sendProfilNotification = () => {
    PushNotificationIOS.presentLocalNotification({
      alertTitle: "Deep link to profile",
      alertBody: "demo://app/profile/234",
      applicationIconBadgeNumber: 1,
    });
  };

ローカル通知は、設定画面に深いリンク

  const sendSettingsNotificationWithSound = () => {
    PushNotificationIOS.addNotificationRequest({
      id: "notificationWithSound",
      title: "Notification Deep link",
      subtitle: "Received Deep link",
      body: "demo://app/settings",
      sound: "customSound.wav",
      badge: 1,
    });
  };

通知画面への深いリンク

  const addNotificationRequest = () => {
    PushNotificationIOS.addNotificationRequest({
      id: "test",
      title: "deep link",
      subtitle: "Open notifications",
      body: "demo://app/notifications",
      category: "test",
      threadId: "thread-id",
      fireDate: new Date(new Date().valueOf() + 2000),
      repeats: true,
    });
  };

今すぐ登録し、通知から登録を取り戻す処理する関数を書くことができます
成功した登録にログデバイストークンをコンソールするだけです

  const onRegistered = (deviceToken) => {
    console.log("Registered For Remote Push", `Device Token: ${deviceToken}`);
  };

を返します.

  const onRegistrationError = (error) => {
    console.log(`Error (${error.code}): ${error.message}`);
  };

イベントリスナーの追加と削除

追加し、イベントリスナーを削除するためのアプリケーションにコードを下に追加

  useEffect(() => {
    PushNotificationIOS.addEventListener("register", onRegistered);
    PushNotificationIOS.addEventListener(
      "registrationError",
      onRegistrationError
    );

    PushNotificationIOS.requestPermissions().then(
      (data) => {
        console.log("PushNotificationIOS.requestPermissions", data);
      },
      (data) => {
        console.log("PushNotificationIOS.requestPermissions failed", data);
      }
    );

    return () => {
      PushNotificationIOS.removeEventListener("register");
      PushNotificationIOS.removeEventListener("registrationError");
      PushNotificationIOS.removeEventListener("notification");
      PushNotificationIOS.removeEventListener("localNotification");
    };
  }, []);

取扱説明書の取り扱い

今すぐ通知のClickイベントを処理する機能を作成しましょう

  const onLocalNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;
    // Handle deeplink here from notification - done below
  };

我々は加える必要があるonLocalNotification() イベントリスナーには、更新されたイベントリスターが以下のようになります.

useEffect(() => {
    PushNotificationIOS.addEventListener("register", onRegistered);
    PushNotificationIOS.addEventListener(
      "registrationError",
      onRegistrationError
    );
    PushNotificationIOS.addEventListener(
      "localNotification",
      onLocalNotification
    ); // Handling click on notification

    PushNotificationIOS.requestPermissions().then(
      (data) => {
        console.log("PushNotificationIOS.requestPermissions", data);
      },
      (data) => {
        console.log("PushNotificationIOS.requestPermissions failed", data);
      }
    );

    return () => {
      PushNotificationIOS.removeEventListener("register");
      PushNotificationIOS.removeEventListener("registrationError");
      PushNotificationIOS.removeEventListener("notification");
      PushNotificationIOS.removeEventListener("localNotification");
    };
  }, []);

魔法をしましょう

輸入Linking からreact-native ファイルの先頭にある.
変更するonLocalNotification() 以下の方法

const onLocalNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;
    Linking.openURL(notification.getMessage());
  };

我々はコーディング部分を
簡単でしたね.

通知からの深いリンクのテスト

4時22分のテストのビデオ
フルソースコードはGithub Repo
このコンテンツは、ビデオとしても利用可能です

更なる読書

How to implement deep linking in React Native app with React Navigation v5

また、私の新しい記事と話について通知されます:
私の購読
フォローミーオンMedium , Github , および.
あなたも私を見つけることができます.
私はかなり活発で、そこで小さな話題を書きます.
チアーズ!ハッピーコーディング!