React-Native Firebase将推送通知onClick推送到我的应用内的特定页面

时间:2019-06-20 20:37:57

标签: javascript react-native firebase-cloud-messaging

我希望发出推送通知,以便能够在单击“指纹”后将其带到特定页面。截至目前,单击推送通知不会执行任何操作,除非在后台打开应用程序。我已经在网上搜索了,但试错了两天了,但无济于事。任何帮助将不胜感激。

import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, Alert, AsyncStorage, Button} from 'react-native';
    import firebase from 'react-native-firebase';





type Props = {};
export default class testapp extends Component<Props> {


  async componentDidMount() {
    this.checkPermission();
    this.createNotificationListeners(); //add this line
  }

  componentWillUnmount() {
    this.notificationListener;
    this.notificationOpenedListener;
  }

  //1
  async checkPermission() {
    const enabled = await firebase.messaging().hasPermission();
    if (enabled) {
      this.getToken();
    } else {
      this.requestPermission();
    }
  }

  //3
  async getToken() {
    let fcmToken = await AsyncStorage.getItem('fcmToken');
    if (!fcmToken) {
      fcmToken = await firebase.messaging().getToken();
      if (fcmToken) {
        // user has a device token
        console.log('fcmToken:', fcmToken);
        await AsyncStorage.setItem('fcmToken', fcmToken);
      }
    }
    console.log('fcmToken:', fcmToken);
  }

  //2
  async requestPermission() {
    try {
      await firebase.messaging().requestPermission();
      // User has authorised
      this.getToken();
    } catch (error) {
      // User has rejected permissions
      console.log('permission rejected');
    }
  }

  async createNotificationListeners() {
    /*
    * Triggered when a particular notification has been received in foreground
    * */
    this.notificationListener = firebase.notifications().onNotification((notification) => {
      const { title, body } = notification;
      console.log('onNotification:');

        const localNotification = new firebase.notifications.Notification({
          sound: 'sampleaudio',
          show_in_foreground: true,
        })
        .setSound('sampleaudio.wav')
        .setNotificationId(notification.notificationId)
        .setTitle(notification.title)
        .setBody(notification.body)
        .android.setChannelId('fcm_FirebaseNotifiction_default_channel') // e.g. the id you chose above
        .android.setSmallIcon('@drawable/ic_launcher') // create this icon in Android Studio
        .android.setColor('#000000') // you can set a color here    
        // .setClickAction(()=>alert('test'))   
        .android.setPriority(firebase.notifications.Android.Priority.High);


        firebase.notifications()
          .displayNotification(localNotification)
          .catch(err => console.error(err));
    });

    const channel = new firebase.notifications.Android.Channel('fcm_FirebaseNotifiction_default_channel', 'UniFinalApp', firebase.notifications.Android.Importance.High)
      .setDescription('Demo app description')
      .setSound('sampleaudio.wav');
    firebase.notifications().android.createChannel(channel);

    /*
    Code would probably go in the section below
    * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
    * */
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
      const { title, body } = notificationOpen.notification;
      console.log('onNotificationOpened:');

      // Alert.alert(title, body)


    });

    /*
    * If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
    * */
    const notificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      const { title, body } = notificationOpen.notification;
      console.log('getInitialNotification:');
      Alert.alert(title, body)
    }
    /*
    * Triggered for data only payload in foreground
    * */
   this.messageListener = firebase.messaging().onMessage((message) => {
    //process data message
    console.log("JSON.stringify:", JSON.stringify(message));
  });
}
render() {
  // const {navigate}=this.props.navigation;
    return (
      <View >


      </View>
    );
  }
}

2 个答案:

答案 0 :(得分:0)

React-native-firebase的文档中;有一节介绍如何处理通知中的数据。您可以做的是在通知内发送数据,通知应用程序该怎么做。例如:

firebase.notifications().getInitialNotification()
.then((notificationOpen: NotificationOpen) => {
   if (notificationOpen) {
      // App was opened by a notification
      const notification: Notification = notificationOpen.notification;  
      const data = notificationOpen.notification._data;
        if (data.action === 'openChat') {
          //Code to open Chat screen  
        }
   }
});

或者您可以使用通知中的数据设置一些标志,然后在用户进入特定屏幕(例如登录后)后检查标志以查看是否需要执行某些操作。

答案 1 :(得分:0)

我正在尝试获取这样的通知,但它也无法正常工作。这适用于后台操作,意味着当应用关闭时

const notificationOpen = await firebase.notifications().getInitialNotification();
if (notificationOpen) {
    const {_notificationId} = notificationOpen.notification.data
    if (_notificationId) {
     redirect('chatform', {id: _notificationId})
    }
}