PushNotificationIOS

本模块帮助你处理应用的推送通知,包括权限控制以及应用图标上的角标数(未读消息数)。

要使用推送通知功能,首先在苹果后台配置推送通知服务并且准备好服务端的系统。设置的过程可以参考Parse的教程

首先请手动链接PushNotificationIOS的库(以下操作如果不熟悉,请自行补习Xcode的使用教程):

  • node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj文件拖到Xcode界面中
  • 在Xcode的Link Binary With Libraries中添加libRCTPushNotification.a

然后你需要在AppDelegate中启用推送通知的支持以及注册相应的事件。

AppDelegate.m开头:

#import <React/RCTPushNotificationManager.h>

然后在AppDelegate实现中添加如下的代码:

   // Required to register for notifications
   - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
   {
    [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
   }
   // Required for the register event.
   - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
   {
    [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
   }
   // Required for the notification event.
   - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
   {
    [RCTPushNotificationManager didReceiveRemoteNotification:notification];
   }
   // Required for the localNotification event.
   - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
   {
    [RCTPushNotificationManager didReceiveLocalNotification:notification];
   }

方法#

static presentLocalNotification(details: Object) #

立即产生一个本地通知

details参数是一个对象,包含:

  • alertBody : 要在通知提示中显示的消息。
  • alertAction : 在交互式通知提示下显示的"action"。默认为"view"。
  • soundName : 通知触发时播放的声音名字(可选)。
  • category : 可选的通知类型,但对于交互式通知为必填。
  • userInfo : 提供一个可选的object,可以在其中提供额外的数据。
  • applicationIconBadgeNumber : 指定显示在应用右上角的数字角标(可选)。默认值为0,即不显示角标。

static scheduleLocalNotification(details: Object) #

计划一个本地通知,在将来进行提示。

details参数是一个对象,包含:

  • fireDate : 系统发送这个提示的日期和时间。
  • alertBody : 要在通知提示中显示的消息。
  • alertAction : 在交互式通知提示下显示的"action"。默认为"view"。
  • soundName : 通知触发时播放的声音名字(可选)。
  • category : 可选的通知类型,但对于交互式通知为必填。
  • userInfo : 提供一个可选的object,可以在其中提供额外的数据。
  • applicationIconBadgeNumber : 指定显示在应用右上角的数字角标(可选)。默认值为0,即不显示角标。

static cancelAllLocalNotifications() #

取消所有已计划的本地通知

static setApplicationIconBadgeNumber(number: number) #

设置要在手机主屏幕应用图标上显示的角标数(未读消息数)。

static getApplicationIconBadgeNumber(callback: Function) #

获取目前在手机主屏幕应用图标上显示的角标数(未读消息数)。

static addEventListener(type: string, handler: Function) #

添加一个监听器,监听远程或本地推送的通知事件,不论应用在前台还是在后台运行

事件类型有:

  • notification : 当收到来自远程的推送通知时调用handler函数,第一个参数是一个PushNotificationIOS实例。
  • localNotification : 当收到来自本地的推送通知时调用handler函数,第一个参数是一个PushNotificationIOS实例。
  • register: 当用户注册远程通知的时候调用handler函数。参数是一个十六进制的字符串,表示了设备标识(deviceToken)。

static requestPermissions(permissions?: { alert?: boolean, badge?: boolean, sound?: boolean }) #

向iOS系统请求通知权限,给用户展示一个对话框。默认情况下,它会请求所有的权限。不过你可以通过传递一个映射(map)到permissions参数来请求指定的权限子集。可以请求的权限类型有:

  • alert
  • badge
  • sound

如果提供了一个映射(map)作为参数,只有值为真值的权限才会被请求。

static abandonPermissions() #

注销所有从苹果推送通知服务收到的远程消息。

你应该只会在极少的情况下需要调用此函数,譬如一个新版本的App要取消所有远程推送通知的支持。如果是用户希望关闭推送通知,他可以打开系统设置的推送通知一栏来暂时屏蔽。应用通过此方法注销后,可以随时重新注册。

static checkPermissions(callback: Function) #

检查哪些推送通知权限被开启。 callback函数会被调用,参数为permissions 对象:

  • alert :boolean
  • badge :boolean
  • sound :boolean

static removeEventListener(type: string, handler: Function) #

移除注册事件监听器。在componentWillUnmount中调用此函数以避免内存泄露。

static getInitialNotification() #

如果用户通过点击推送通知来冷启动应用(即:之前应用不在运行状态),此函数会返回一个初始的通知。

第一次调用getInitialNotification会返回初始的通知对象,或者返回null。后续的调用全部会返回null.

constructor(nativeNotif: Object) #

你应该永远不需要自己实例化PushNotificationIOS对象。监听notification事件和调用popInitialNotification应当足够了。

finish(fetchResult) #

This method is available for remote notifications that have been received via: application:didReceiveRemoteNotification:fetchCompletionHandler: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplicationDelegate_Protocol/#//apple_ref/occ/intfm/UIApplicationDelegate/application:didReceiveRemoteNotification:fetchCompletionHandler:

Call this to execute when the remote notification handling is complete. When calling this block, pass in the fetch result value that best describes the results of your operation. You must call this handler and should do so as soon as possible. For a list of possible values, see PushNotificationIOS.FetchResult.

If you do not call this method your background remote notifications could be throttled, to read more about it see the above documentation link.

getMessage() #

getAlert方法的别名。获取推送通知的主消息内容。

getSound() #

aps对象中获取声音字符串

getAlert() #

aps对象中获取推送通知的主消息内容。

getBadgeCount() #

aps对象中获取推送通知的角标数(未读消息数)。

getData() #

获取推送的数据对象。

例子#

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AlertIOS,
  PushNotificationIOS,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = ReactNative;

var Button = React.createClass({
  render: function() {
    return (
      <TouchableHighlight
        underlayColor={'white'}
        style={styles.button}
        onPress={this.props.onPress}>
        <Text style={styles.buttonLabel}>
          {this.props.label}
        </Text>
      </TouchableHighlight>
    );
  }
});

class NotificationExample extends React.Component {
  componentWillMount() {
    // Add listener for push notifications
    PushNotificationIOS.addEventListener('notification', this._onNotification);
    // Add listener for local notifications
    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);
  }

  componentWillUnmount() {
    // Remove listener for push notifications
    PushNotificationIOS.removeEventListener('notification', this._onNotification);
    // Remove listener for local notifications
    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
  }

  render() {
    return (
      <View>
        <Button
          onPress={this._sendNotification}
          label="Send fake notification"
        />

        <Button
          onPress={this._sendLocalNotification}
          label="Send fake local notification"
        />
      </View>
    );
  }

  _sendNotification() {
    require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
      aps: {
        alert: 'Sample notification',
        badge: '+1',
        sound: 'default',
        category: 'REACT_NATIVE'
      },
    });
  }

  _sendLocalNotification() {
    require('RCTDeviceEventEmitter').emit('localNotificationReceived', {
      aps: {
        alert: 'Sample local notification',
        badge: '+1',
        sound: 'default',
        category: 'REACT_NATIVE'
      },
    });
  }

  _onNotification(notification) {
    AlertIOS.alert(
      'Push Notification Received',
      'Alert message: ' + notification.getMessage(),
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }

  _onLocalNotification(notification){
    AlertIOS.alert(
      'Local Notification Received',
      'Alert message: ' + notification.getMessage(),
      [{
        text: 'Dismiss',
        onPress: null,
      }]
    );
  }
}

class NotificationPermissionExample extends React.Component {
  state: any;

  constructor(props) {
    super(props);
    this.state = {permissions: null};
  }

  render() {
    return (
      <View>
        <Button
          onPress={this._showPermissions.bind(this)}
          label="Show enabled permissions"
        />
        <Text>
          {JSON.stringify(this.state.permissions)}
        </Text>
      </View>
    );
  }

  _showPermissions() {
    PushNotificationIOS.checkPermissions((permissions) => {
      this.setState({permissions});
    });
  }
}

var styles = StyleSheet.create({
  button: {
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonLabel: {
    color: 'blue',
  },
});

exports.title = 'PushNotificationIOS';
exports.description = 'Apple PushNotification and badge value';
exports.examples = [
{
  title: 'Badge Number',
  render(): ReactElement<any> {
    PushNotificationIOS.requestPermissions();

    return (
      <View>
        <Button
          onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)}
          label="Set app's icon badge to 42"
        />
        <Button
          onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)}
          label="Clear app's icon badge"
        />
      </View>
    );
  },
},
{
  title: 'Push Notifications',
  render(): ReactElement<any> {
    return <NotificationExample />;
  }
},
{
  title: 'Notifications Permissions',
  render(): ReactElement<any> {
    return <NotificationPermissionExample />;
  }
}];