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>