应用程序处于前台或关闭时收到推送通知后的正确导航方式

Question

这是所有使用 React 导航的人的普遍问题，以下是我的导航结构

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

Answer 1

要实现此行为，您需要实施 Deep Linking to your app. A detail example and explanation can be found in react-navigation docs and in this issue。

来自 React-Native 文档

Linking gives you a general interface to interact with both incoming and outgoing app links.

来自 react-navigation 文档

Deep linking

In this guide we will set up our app to handle external URIs. Let's suppose that we want a URI like mychat://chat/Eric to open our app and link straight into a chat screen for some user named "Eric".

来自react-native-fcm问题

You can use the notification listener to grab notification details and use your router (in my case react-native-router-flux) to trigger the desired action and show the right view.

Answer 2

我正在使用 rn-firebase，但这适用于您的 react-navigator：

基本上你必须在主要组件上收听你的通知并获取你的顶级导航器组件的引用并以特定的调用方式使用它

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

应用程序处于前台或关闭时收到推送通知后的正确导航方式

Correct way of navigation upon receiving push notification when app is in foreground or closed

react-native

react-navigation

react-native-fcm