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

Question

这是所有使用反应导航的人的一般性问题，以下是我的导航结构

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

我正在使用"反应原生-fcm"在应用程序处于前台或关闭时接收通知。我应该如何构建代码以在收到通知时导航到特定屏幕？我应该在每个屏幕中订阅onNotification，然后导航到特定屏幕还是将其放在集中位置？以前有人解决这个问题吗？示例代码会很棒

软件版本：

反应导航 1.0.0-beta.26

反应原生 0.49.3

Answer 1

要实现此行为，您需要实现对应用的深层链接。详细的示例和解释可以在react-navigation文档和本期中找到。

来自 React-Native Docs

链接为您提供了一个通用界面来与两个传入进行交互 和传出应用链接。

来自react-navigation文档

深度链接

在本指南中，我们将设置应用以处理外部 URI。假设我们想要一个像 mychat://chat/Eric打开我们的应用程序并直接链接到聊天 屏幕名为"埃里克"的用户。

从react-native-fcm问题

您可以使用通知侦听器获取通知详细信息 并使用您的路由器(在我的例子中是 react-native-router-flux(来触发 所需的操作并显示正确的视图。

Answer 2

我使用的是 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