7

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

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

4

2 回答 2

3

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

基本上，您必须在主组件上收听您的通知并获取顶级导航器组件的 ref 并将其与特定的调用方式一起使用

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

于 2018-07-11T14:21:38.323 回答
3

要实现此行为，您需要对您的应用实施深度链接。详细示例和解释可以在react-navigationdocs和this issue中找到。

来自 React-Native 文档

链接为您提供了与传入和传出应用程序链接进行交互的通用界面。

来自react-navigation文档

深层链接

在本指南中，我们将设置我们的应用程序来处理外部 URI。假设我们想要一个 URI，比如 mychat://chat/Eric打开我们的应用程序并直接链接到某个名为“Eric”的用户的聊天屏幕。

从react-native-fcm问题

您可以使用通知侦听器来获取通知详细信息并使用您的路由器（在我的情况下为 react-native-router-flux）来触发所需的操作并显示正确的视图。

于 2018-03-04T10:44:35.780 回答