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. }];