PushNotificationIOS

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

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

首先请手动链接PushNotificationIOS的库:

  • Header Search Paths中添加: $(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS
  • 将搜索选项设为recursive

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

AppDelegate.m开头:

#import "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,可以在其中提供额外的数据。

static scheduleLocalNotification(details: Object) #

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

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

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

static cancelAllLocalNotifications() #

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

static setApplicationIconBadgeNumber(number: number) #

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

static getApplicationIconBadgeNumber(callback: Function) #

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

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

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

事件类型有:

  • notification : 当收到来自远程的推送通知时调用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 popInitialNotification() #

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

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

constructor(nativeNotif: Object) #

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

getMessage() #

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

getSound() #

aps对象中获取声音字符串

getAlert() #

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

getBadgeCount() #

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

getData() #

获取推送的数据对象。

例子#

'use strict';

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

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() {
    PushNotificationIOS.addEventListener('notification', this._onNotification);
  }

  componentWillUnmount() {
    PushNotificationIOS.removeEventListener('notification', this._onNotification);
  }

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

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

  _onNotification(notification) {
    AlertIOS.alert(
      '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 {
    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 {
    return <NotificationExample />;
  }
},
{
  title: 'Notifications Permissions',
  render(): ReactElement {
    return <NotificationPermissionExample />;
  }
}];