React Native之通过DeviceEventEmitter发送和接收事件

1 怎么实现发送和接收事件

理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现
//增加监听
DeviceEventEmitter.addListener
//取消监听
//this.emitter.remove();
这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客


React Native之Android原生通过DeviceEventEmitter发送消息给js

 

今天还发现

const {navigate} = this.props;

等价于

let navigate = this.props.navigate;

 

 

 


2 测试代码

import React from 'react';
import {View,Text} from 'react-native';
import {DeviceEventEmitter} from "react-native";

export default class App extends React.Component {
        
       constructor(props) {
          super(props); 
          this.state = {name: '点击我'};
       }

       render() {
          return (
            <View style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}>
              <Text
        	  onPress={() => this._press()}
               >{this.state.name}</Text>
            </View>
          );
       }
       componentDidMount() {
           this.emitter = DeviceEventEmitter.addListener("hello",(data) => {
	       console.log("收到通知了:内容是:" + data);
	       this.setState({name: data});
           });
       }
       _press = () => {
           DeviceEventEmitter.emit('hello','chenyu');
       }
       
       componentWillUnmount() {
           this.emitter.remove();
       }
}

 

 

 

3 运行结果

一开始的效果

然后 点击"点击我"效果如下

然后日志打印如下

ReactNativeJS  I  收到通知了:内容是:chenyu

 

相关文章

这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在...
Flutter开发的android端如何修改APP名称,logo,版本号,具体...
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.Mater...