DeviceEventEmitter React-Native 发送和接受消息（事件监听器）
A页面注册通知：
import {DeviceEventEmitter} from 'react-native';
//…
//调用事件通知
DeviceEventEmitter.emit('xxxName',param);
//xxxName:通知的名称 param：发送的消息（传参）
B页面接收通知：
componentDidMount(){ var self = this; this.listener =DeviceEventEmitter.addListener('xxxName',function(param){ // use param do something }); } //xxxName:通知的名称 param:接收到的消息（传参） componentWillUnmount(){ this.listener.remove(); } //在componentWillUnmount 内需要我们手动移除通知
我的页面在获取到用户数据后：
//注册监听事件，时间名称：changeMine 传参：jsonData.avatar（头像url） DeviceEventEmitter.emit('changeMine',jsonData.avatar);
tabbar.js文件
componentDidMount(){ var self = this; this.listener = DeviceEventEmitter.addListener('changeMine',function(url){ self.setState({ avatar:url }) }); //通知开始，获取到url，调用setState 方法，刷新状态机，这时候实时的刷新了‘我的’图标 //最后别忘了移除通知 componentWillUnmount(){ this.listener.remove(); }
使用实例：
1. 点击底部按钮 触发分享朋友圈 / 下载海报图片（包括二维码）
//触发 _share(type = undefined) { if (this.props.type === 'letter') { DeviceEventEmitter.emit('_getSharePage', type); //全局注册分享事件 } } <Button onPress={() => { this._share('wechat') }} title={分享到微信} /> <Button onPress={() => { this._share('save') }} title={下载海报} />
调用
import ViewShot, {captureRef} from "react-native-view-shot"; //将React Native视图捕获到图像。
import QRCode from 'react-native-qrcode-svg'; //将React Native图片生成二维码
import CameraRoll from "@react-native-community/cameraroll"; //这里需要pod很多个文件
import {check, PERMISSIONS, RESULTS} from 'react-native-permissions'; //获取手机权限
componentDidMount() { // Toast.hide(); this.listener = DeviceEventEmitter.addListener('_getSharePage', (params) => { captureRef(this.refs.viewShot, { //通过 ViewShot 绑定的ref来设置截图的类型大小格式 format: "jpg", quality: 1.0, result: 'tmpfile', // snapshotContentContainer:true }).then( uri => { //uri就是返回的图片地址 switch (params) { case 'qq': break; case 'wechat': let message = { platform: "wechat_session", type: 'image', imagePath: uri }; JShareModule.share(message, (map) => { if (map.state === 'success') { // Toast.message('分享成功') } }, (map) => { Toast.message('请安装微信后尝试') // console.log("share failed, map: " + map); }) break; case 'pyq': let wechat = { platform: "wechat_timeLine", type: 'image', imagePath: uri }; JShareModule.share(wechat, (map) => { // Toast.message('分享成功') }, (map) => { Toast.message('取消分享') }) break; case 'weibo': break; default: // if(!this.state.select){ // Toast.message('请选择封面图') // return; // } if (Platform.OS === 'ios') { check(PERMISSIONS.IOS.PHOTO_LIBRARY).then(response => { // if (response === 'authorized') { // } else { // Toast.message('保存相片的权限没开启,请在iPhone的“设置-隐私”选项中,允许修改您的相册') // } switch (response) { case RESULTS.UNAVAILABLE: console.log( 'This feature is not available (on this device / in this context)', ); break; case RESULTS.DENIED: console.log( 'The permission has not been requested / is denied but requestable', ); break; case RESULTS.GRANTED: console.log('The permission is granted'); CameraRoll.saveToCameraRoll(uri,'photo').then(res => { Toast.message('邀请好友截图保存成功'); }).catch(err => { Toast.message(err); }) break; case RESULTS.BLOCKED: console.log('The permission is denied and not requestable anymore'); break; } }).catch(err => { console.log('看看错误是什么',err); Toast.message('有错误找原因') }) } else { try { PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE ).then(granted => { if (granted === PermissionsAndroid.RESULTS.GRANTED) { CameraRoll.saveToCameraRoll(uri, 'photo').then(res => { Toast.message('邀请好友截图保存成功'); }).catch(err => { Toast.message(err); }) } else { Toast.message('保存失败, 请授予权限'); } }).catch(err => { Toast.message('保存失败, 请授予权限'); }) } catch (err) { Toast.message('保存失败, 请授予权限'); } } break; } }, error => { Toast.message(error); } ).catch(err => { console.log(err); }); }) }
<ViewShot ref="viewShot" >
<QRCode
value={Config.domain + '/web/register?invite_code=' + this.props.inviteCode}
size={168}
bgColor='#000'
fgColor='white'
/>
</ViewShot>
监听上拉加载事件
A 父
componentDidMount(){ let self = this; this.listener =DeviceEventEmitter.addListener('footerRefresh',function(func){ self.refreshTrade = func }); } componentWillUnmount(){ this.listener.remove(); } //当触发上拉加载的时候 this.refreshTrade && this.refreshTrade()
B 子
getOrderList(clean = false,use = true) { this.setState({loading: true}); Http.post('/api/v1/ok/spot/orders', { pers: 10, page: clean ? 1 : this.state.page + 1, }).then(res => { this.setState({loading: false}); if (res.status === 10000) { //防止监听器一直触发，保持子页面在父页面只有一个监听器 if(use){ DeviceEventEmitter.emit('footerRefresh',res.has_next ? ()=>{this.getOrderList(false,false)} : ()=>{}); } this.setState({ trade: clean ? res.data : this.state.trade.concat(res.data), hasNext: res.has_next, page: res.page, }); } }).catch(err => { console.log(err); Toast.message('通讯失败'); }); }
