iOS 推送通知

为你的应用程序处理推送通知，包括权限的处理和图标标记数量。

为了启动和运行，在Apple上配置您的通知 和服务器端系统。为了得到一个想法，这里是 解析指南。

方法

static setApplicationIconBadgeNumber(number: number)

在主屏幕上为应用程序的图标设置标记数量

static getApplicationIconBadgeNumber(callback: Function)

在主屏幕上为应用程序的图标获取当前的标记数量

static addEventListener(type: string, handler: Function)

当应用程序在前台或者后台运行的时候，为了远程通知链接一个监听器。

处理程序将会以一个 PushNotificationIOS 的实例的形式被调用

static requestPermissions()

从iOS上请求所有的通知权限，提示用户对话框

static checkPermissions(callback: Function)

查看当前正被启用的推送权限。Callback 函数将被一个
permission 的对象调用：

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

static removeEventListener(type: string, handler: Function)

删除事件监听器。为了防止内存泄露，该操作在 componentWillUnmount 里完成。

static popInitialNotification()

如果应用程序从一个通知被冷发射，那么一个原始通知将变成可用状态。
popInitialNotification 的第一个调用者将获取最初的通知对象，或者为 null。后续的调用将返回 null。

constructor(nativeNotif)

你自己可能永远都不需要 instansiate PushNotificationIOS。你只需要监听 notification 事件并且调用 popInitialNotification就足够了。

getMessage()

getAlert 的一个别名，该函数是为了获取通知的主要消息字符串

getSound()

从 aps 对象中获取声音字符串

getAlert()

从 aps 对象中获取通知的主要消息字符串

getBadgeCount()

从 aps 对象中获取标记数量

getData()

在通知上获取数据对象

例子

Edit on GitHub

  1.     'use strict';
  2.     var React = require('react-native');
  3.     var {
  4.       AlertIOS,
  5.       PushNotificationIOS,
  6.       StyleSheet,
  7.       Text,
  8.       TouchableHighlight,
  9.       View,
  10.     } = React;
  11.     var Button = React.createClass({
  12.       render: function() {
  13.         return (
  14.           <TouchableHighlight
  15.             underlayColor={'white'}
  16.             style={styles.button}
  17.             onPress={this.props.onPress}>
  18.             <Text style={styles.buttonLabel}>
  19.               {this.props.label}
  20.             </Text>
  21.           </TouchableHighlight>
  22.         );
  23.       }
  24.     });
  25.     class NotificationExample extends React.Component {
  26.       componentWillMount() {
  27.         PushNotificationIOS.addEventListener('notification', this._onNotification);
  28.       }
  29.       componentWillUnmount() {
  30.         PushNotificationIOS.removeEventListener('notification', this._onNotification);
  31.       }
  32.       render() {
  33.         return (
  34.           <View>
  35.             <Button
  36.               onPress={this._sendNotification}
  37.               label="Send fake notification"
  38.             />
  39.           </View>
  40.         );
  41.       }
  42.       _sendNotification() {
  43.         require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
  44.           aps: {
  45.             alert: 'Sample notification',
  46.             badge: '+1',
  47.             sound: 'default',
  48.             category: 'REACT_NATIVE'
  49.           },
  50.         });
  51.       }
  52.       _onNotification(notification) {
  53.         AlertIOS.alert(
  54.           'Notification Received',
  55.           'Alert message: ' + notification.getMessage(),
  56.           [{
  57.             text: 'Dismiss',
  58.             onPress: null,
  59.           }]
  60.         );
  61.       }
  62.     }
  63.     class NotificationPermissionExample extends React.Component {
  64.       constructor(props) {
  65.         super(props);
  66.         this.state = {permissions: null};
  67.       }
  68.       render() {
  69.         return (
  70.           <View>
  71.             <Button
  72.               onPress={this._showPermissions.bind(this)}
  73.               label="Show enabled permissions"
  74.             />
  75.             <Text>
  76.               {JSON.stringify(this.state.permissions)}
  77.             </Text>
  78.           </View>
  79.         );
  80.       }
  81.       _showPermissions() {
  82.         PushNotificationIOS.checkPermissions((permissions) => {
  83.           this.setState({permissions});
  84.         });
  85.       }
  86.     }
  87.     var styles = StyleSheet.create({
  88.       button: {
  89.         padding: 10,
  90.         alignItems: 'center',
  91.         justifyContent: 'center',
  92.       },
  93.       buttonLabel: {
  94.         color: 'blue',
  95.       },
  96.     });
  97.     exports.title = 'PushNotificationIOS';
  98.     exports.description = 'Apple PushNotification and badge value';
  99.     exports.examples = [
  100.     {
  101.       title: 'Badge Number',
  102.       render(): React.Component {
  103.         PushNotificationIOS.requestPermissions();
  104.         return (
  105.           <View>
  106.             <Button
  107.               onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)}
  108.               label="Set app's icon badge to 42"
  109.             />
  110.             <Button
  111.               onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)}
  112.               label="Clear app's icon badge"
  113.             />
  114.           </View>
  115.         );
  116.       },
  117.     },
  118.     {
  119.       title: 'Push Notifications',
  120.       render(): React.Component {
  121.         return <NotificationExample />;
  122.       }
  123.     },
  124.     {
  125.       title: 'Notifications Permissions',
  126.       render(): React.Component {
  127.         return <NotificationPermissionExample />;
  128.       }
  129.     }];