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表示您的组件没有导航道具。您必须使用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,
};

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

3 个答案: