React Native 刚出来不久,写过一篇react-native 组件间通信的文章,里面介绍了组件间三种关系的相互通信。用了一段时间下来,感觉React Native 这套组件间传递数据的方法,实施起来特别麻烦,并且不利于解耦。

翻看React Native的文档,并没有看到实现组件间消息机制的方法。但在源码里,找到了相关的实现。

其中EventEmitter实现了事件机制,基于EventEmitter可以实现在一个component里注册一个自定义事件,在另一个component监听该事件,从而实现简单的观察者模式

RCTDeviceEventEmitter从源码里可以看到,只是实例化了一个EventEmitter而已。在PushNotificationIOS组件中有相关的使用。

Subscribable也是对EventEmitter做了一层封装,实现了一个较为安全的mixin方法来处理事件。

具体API请直接查看源码,比较简单,就不一一介绍了。

DEMO3

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');

var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');

var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


var Input = React.createClass({

    handleUpdateChange(text) {
        RCTDeviceEventEmitter.emit('change',text);
    },


  render() {

    return (
      <View style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} />
      </View>
    );
  }
});




var ShowText = React.createClass({

    getInitialState(){
      return {
        text : ''
      }
    },

    componentDidMount(){
      var me = this;
      RCTDeviceEventEmitter.addListener('change',function(text){
         me.setState({
          text : text
         })
      })
    },


    render() {
        return (
          <View style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
            <Text>{this.state.text}</Text>
          </View>
        );
    }
});

module.exports = React.createClass({


  render() {
    return (
      <View style={styles.container}>
        <Input />
        <ShowText />
      </View>
    );
  }
});

另一个使用Subscribable实现的DEMO:https://github.com/colinramsay/react-native-event-emitters/blob/master/index.ios.js

One thought on “React Native 自定义事件机制

  1. Pingback: React Native开发技术周报第六期 | 江清清的技术专栏

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required