web-dev-qa-db-ja.com

アプリがフォアグラウンドまたはクローズのときにプッシュ通知を受信したときの正しいナビゲーション方法

これは、反応ナビゲーションを使用しているすべての人への一般的な質問です、以下は私のナビゲーション構造です

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator({
      Login: screen: Login,
      Welcome: screen: Welcome,
      Loading: screen: Loading,
      SignedIn: screen:  SignedIn,
   });
};

export const SignedIn = TabNavigator ({
    Home: screen: HomeNavigation, 
    FeedBack: screen: FeedBackNavigation, 
    Search: screen: SearchNavigation, 
    Me: screen: ProfileNavigation,  
});

アプリがフォアグラウンドまたは閉じているときに通知を受け取るために、「react-native-fcm」を使用しています。通知を受け取ったときに特定の画面に移動するコードをどのように構成すればよいですか？すべての画面でonNotificationをサブスクライブしてから、特定の画面に移動するか、それとも一元化された場所に配置しますか？誰かが以前にこれに取り組みましたか？サンプルコードは素晴らしいでしょう

ソフトウェアバージョン：

反応ナビゲーション1.0.0-beta.26

反応ネイティブ0.49.3

react-nativereact-navigationreact-native-fcm
7
Shekhar Kamble

この動作を実現するには、アプリに Deep Linking を実装する必要があります。詳細な例と説明は react-navigation docs および this issue にあります。

React-Native Docsから

リンクすると、アプリの着信リンクと発信リンクの両方を操作するための一般的なインターフェースが提供されます。

react-navigation docsから

ディープリンク

このガイドでは、外部URIを処理するようにアプリを設定します。 mychat://chat/EricのようなURIでアプリを開き、「Eric」という名前のユーザーのチャット画面に直接リンクするとします。

react-native-fcmの問題から

通知リスナーを使用して通知の詳細を取得し、ルーター（私の場合はreact-native-router-flux）を使用して目的のアクションをトリガーし、正しいビューを表示できます。

3
bennygenel

私はrn-firebaseを使用していますが、これはリアクションナビゲーターで機能します：

基本的に、メインコンポーネントで通知をリッスンし、トップナビゲーターコンポーネントの参照を取得して、特定の呼び出し方法で使用する必要があります

navigator: any;

constructor(props: Props) {
    super(props);
    this.onPressNotificacion = this.onPressNotificacion.bind(this); // you need this to use 'this' on 'onPressNotificacion'
    firebase.notifications().onNotificationOpened(this.onPressNotificacion);
  }

onPressNotificacion() {
  this.navigator.dispatch(NavigationActions.navigate({ routeName: 'somescreen', params: someParams }));
}

render() {
    return (
        <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }

詳細： https://github.com/react-navigation/react-navigation/issues/742#issuecomment-404184307

3
David Rearte