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

简介: 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 运行结果

一开始的效果

20170724223902569.png

20170724223902569.png然后 点击"点击我"效果如下20170724223902569.png


20170724223902569.png

然后日志打印如下

ReactNativeJS  I  收到通知了:内容是:chenyu
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
40 1
|
22天前
|
前端开发 JavaScript 开发者
React 事件处理机制详解
【10月更文挑战第23天】本文介绍了 React 的事件处理机制,包括事件绑定、事件对象、常见问题及解决方案。通过基础概念和代码示例,详细讲解了如何处理 `this` 绑定、性能优化、阻止默认行为和事件委托等问题,帮助开发者编写高效、可维护的 React 应用程序。
66 4
|
1月前
|
前端开发 JavaScript IDE
React 事件处理
10月更文挑战第8天
21 1
|
1月前
|
前端开发 JavaScript
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
47 0
|
2月前
|
前端开发 JavaScript
react学习(19)事件处理
react学习(19)事件处理
|
2月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
3月前
|
前端开发 JavaScript Java
React 中的合成事件
【8月更文挑战第30天】
49 6
|
3月前
|
前端开发 JavaScript
React 中的事件是什么?
【8月更文挑战第30天】
74 5
|
3月前
|
存储 前端开发 JavaScript
React中的事件处理(八)
【8月更文挑战第15天】React中的事件处理
35 1
|
3月前
|
前端开发 JavaScript 开发者
如何在 React 中处理事件?
【8月更文挑战第31天】
46 0