在原生应用开发中,为了解决不同组件之间的数据交互问题,经常会用到广播,或者使用接口等方式,如Android的EventBus等框架。而在React Native中,则可以通过DeviceEventEmitter来实现。
例如有下面一个效果,用以模拟广播。
这里写图片描述
DeviceEventEmitter的用法和EventBus一样,都是观察响应模式。一个最简单的场景,A页面使用DeviceEventEmitter发送消息,然后B页面获取到消息,然后使用B页面的状态机更新内容即可。

那么A页面发送消息的代码如下:

import  { 
 DeviceEventEmitter 
 } from 'react-native'; 
 
 //调用事件通知,param是指传递的相应参数 
 DeviceEventEmitter.emit('xxxName’,param);

然后在B页面接受消息,

import  { 
  DeviceEventEmitter 
  } from 'react-native'; 
 
  componentDidMount(){ 
       DeviceEventEmitter.addListener('xxxName’, Function); 
  }; 
 
 //在组件销毁的时候要将其移除 
 componentWillUnmount(){ 
     DeviceEventEmitter.remove(); 
 };

和EventBus类似,当组件被消耗时,需要调用DeviceEventEmitter.remove()。

如果需要更新某个组件的值,还需要对状态进行设置,

constructor() { 
        super(); 
        this.state = { 
            msgCount:0, 
        } 
    } 
//接受消息,并对字段状态进行更新 
componentDidMount() { 
         DeviceEventEmitter.addListener('xxxName', (num) => { 
            console.log('收到通知:' + num) 
             this.setState({ 
                 msgCount: num, 
                 } 
             ); 
        }); 
    }
发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

React Native组件生命周期与父子组件传值详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。