- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 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
'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 {
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(): React.Component {
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(): React.Component { return <NotificationExample />;
}
},
{ title: 'Notifications Permissions',
render(): React.Component { return <NotificationPermissionExample />;
}
}];