无法从推送通知导航到所选屏幕

Question

当用户单击或按下通知时，我希望打开特定屏幕。我经历了各种 github 问题和堆栈溢出问题和答案，但是似乎没有一个答案或选择的方式来解决这个问题。

最初我使用 PushController 类来处理 onNotification 函数，但是我没有将 configure 和 onNotification 函数移动到组件中，并安装在创建本地通知的组件中。

this.props.navigation.navigate('RouteName'); 

不起作用。它说this.props.navigation 或this.props.navigation.navigate 是未定义的。

PushNotification.
            onNotification(notification) {
                console.log('onNotification')
                console.log( notification );
this.props.navigation.navigate('RegisterRoute');
            },

        });

从通知路由或导航到所选屏幕的正确方法是什么。我在 react-native-push-notification 问题和文档中找不到直接答案。

编辑： 此代码可以在我调用/发出本地通知的类中找到。 通知被触发和调用，当单击通知或 onNotification 时，我想导航或路由到另一个屏幕。

组件内部确实挂载了。

PushNotification.configure({

            onNotification(notification) {
                console.log('onNotification')
                console.log( notification );
this.props.navigation.navigate('ChosenScreen');
            },


        });

调用并创建本地通知的函数

function sendNotification(title, pushMessage){
        PushNotification.localNotification({
        message: pushMessage, 
        title: title,
        userInteraction: true,
        alertAction: 'default',// (optional) default: view

       autoCancel: true, 
       largeIcon: "logo", 
       smallIcon: "logo",
       vibrate: true, 
       vibration: 300,

       alertAction: 'default',
       userInfo: 'default'

      });

}

Answer 1

this.props.navigation was undefined 表示您的组件没有 navigation 属性。你必须使用withNavigation，这是一个高阶组件。

Answer 2

可能您的onOpened 函数没有正确的范围，因为它是在addEventListener 函数中调用的，所以您必须绑定this。

例如：（好）

 OneSignal.addEventListener('opened', this.onOpened.bind(this));

（错误）- 没有导航访问权限

 OneSignal.addEventListener('received', this.onReceived);

Answer 3

这是我解决问题的方法。

我找到了有关如何创建导航服务的指南（我找不到链接），该服务有助于解决道具未定义的问题。我导入了这个服务，它是我用来导航的。

我的通知在哪里声明和使用

import NavigationService from './NavigationService.js';

compnentDidMount(){
  PushNotification.configure({
    onNotification(notification){
    console.log('onNotification')
    console.log(notification );
      NavigationService.navigate('Route', {Params: param});


  },
  });

}

导航服务类

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setTopLevelNavigator,
};