web-dev-qa-db-ja.com

React Native with One Signal？）で通知を開いたときに画面を移動する方法

これが私のコードです。通知または通知のボタンをクリックしたときに、ユーザーを目的の画面に移動するにはどうすればよいですか。

componentWillMount() {
    OneSignal.addEventListener('received', this.onReceived);
    OneSignal.addEventListener('opened', this.onOpened);
    OneSignal.addEventListener('registered', this.onRegistered);
    OneSignal.addEventListener('ids', this.onIds);

    OneSignal.inFocusDisplaying(2);
    OneSignal.requestPermissions({
        alert: true,
        badge: true,
        sound: true
    });
}

componentWillUnmount() {
    this.isUnmounted = true;

    OneSignal.removeEventListener('received', this.onReceived);
    OneSignal.removeEventListener('opened', this.onOpened);
    OneSignal.removeEventListener('registered', this.onRegistered);
    OneSignal.removeEventListener('ids', this.onIds);
}

onReceived(notification) {
    console.log("Notification received: ", notification);
}

onOpened(openResult) { // HERE I WANT TO NAVIGATE TO ANOTHER SCREEN INSTEAD OF HOME SCREEN
    this.isNotification = true;

    let data = openResult.notification.payload.additionalData;
    let inFocus = openResult.notification.isAppInFocus;

    console.log('Message: ', openResult.notification.payload.body);
    console.log('Data: ', openResult.notification.payload.additionalData);
    console.log('isActive: ', openResult.notification.isAppInFocus);
    console.log('openResult: ', openResult);
}

onRegistered(notifData) {
    console.log("Device had been registered for Push notifications!", notifData);
}

onIds(device) {
    try {
        AsyncStorage.setItem("@SC:deviceInfo", JSON.stringify(device));
    } catch (error) {
        console.log(error);
    }
}

React Native + OneSignal + React Navigation + Redux。助けてください！

react-nativereact-reduxreact-navigationonesignal
9
Abyd

望ましい動作を実現するには、いくつかのことを行うことができます。ルーターの通知と状態を手動で確認し、必要に応じてユーザーを画面にリダイレクトするか、 Deep Linking 機能を使用できます。

ディープリンクを使用するには、通知の送信中に url パラメータを通知に添付します。アプリの正しい画面にユーザーを誘導するには、 react-navigationディープリンク 機能を使用できます。

From One Signal Documentation

url stringユーザーが通知をクリックしたときにブラウザーで開くURL。例： http://www.google.com

注：iOSでは、plistにhttpsまたは更新されたNSAppTransportSecurityが必要です

From React Navigation Documentation

ディープリンク

このガイドでは、外部URIを処理するようにアプリを設定します。 入門ガイド で作成したSimpleAppから始めましょう。この例では、mychat://chat/TaylorのようなURIでアプリを開き、Taylorのチャットページに直接リンクする必要があります。

6
bennygenel

NavigationActionが発生したときにnavigateをディスパッチしたり、onOpenedアクションを実行したりできます。次のスニペットは動作するはずです：

componentWillMount() {
    OneSignal.inFocusDisplaying(0);
    OneSignal.removeEventListener('opened', this.onOpened.bind(this));
    OneSignal.addEventListener('opened', this.onOpened.bind(this));
  }

onOpened(openResult) {
    let data = openResult.notification.payload.additionalData;
    // ScreenName is the name of the screen you defined in StackNavigator
    this.props.navigation.navigate('ScreenName', data)
}
6
Mostafiz Rahman

他の誰かが私のものと同様の問題を抱えている場合は、@ Mostafiz Rahmanの発言に追加したいと思います。私が作業していたアプリには、引き出しの中にネストされたスタックとタブ（react-navigation v1）がたくさんありました。Stack1がバックグラウンドであり、通知がStack2に関するものだった場合、ジャンプしてもらいます。

スタックの最初の画面（Stack1の最初の画面、Stack2の最初の画面など）のすべてに、ラーマン氏が説明したロジックを入れてしまいました。

0
Sara Inés Calderón