React native 带有React Native的EventEmitter和订阅服务器ES6语法

我试图在react本机类中的两个组件之间实现EventEmitter/Subscriber关系。我看过以下材料：

这些解决方案对于我试图实现的目标来说已经足够了，但是，它们需要在接收组件上使用

Mixin:[Subscribable.Mixin]

，才能与

Subscriber

正常工作。不幸的是，我正在使用ES6并从

Component

扩展我的类，所以我不能使用这种mixin语法

---

我的问题是：在不使用mixin的情况下，如何在ES6中实现上述解决方案？

我能够找到一个解决方法。不确定它是否合适，但它不需要任何修改就可以工作。关键是添加

reactMixin（DetailView.prototype，Subscribable.Mixin）在类定义之后

脱离了围绕EventEmitter和Subscribable浮动的示例：

'use strict';

var reactMixin = require('react-mixin');
var React = require('react-native');
var EventEmitter = require('EventEmitter');
var Subscribable = require('Subscribable');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS
} = React;

class MainView extends Component {
    constructor(props){
      super(props);
      this.EventEmitter = new EventEmitter();
    }

    somethingHappenedFunction(){
      this.EventEmitter.emit("update_event", { message: "hello from up here"});
    }

    //rest of the class
}

class DetailView extends Component {
   componentDidMount(){
     this.addListenerOn(this.props.events, 'update_event', this.miscFunction);
   }

   miscFunction(args) {
    console.log("message: %s", args.message);
   }

   //rest of the class
}
reactMixin(DetailView.prototype, Subscribable.Mixin);

使用EventEmitter不需要mixin

简单演示：

import EventEmitter from 'EventEmitter';

let x = new EventEmitter();

function handler(arg) {
    console.log(`event-name has occurred! here is the event data arg=${JSON.stringify(arg)}`);
}

x.addListener('event-name', handler);

x.emit('event-name', { es6rules: true, mixinsAreLame: true });

addListener
的完整签名包含三个参数：

EventEmitter.addListener(eventName, handler, handlerContext)

在react组件中，您可能希望使用该上下文参数，以便处理程序可以是类方法而不是内联函数，并且仍然保留
this==组件实例
。例如：

componentDidMount() {
    someEmitter.addListener('awesome', this.handleAwesomeEvents, this);
    // the generalist suggests the alternative:
    someEmitter.addListener('awesome', this.handleAwesomeEvents.bind(this));
}

handleAwesomeEvents = (event) => {
    let awesomeness = event.awesomeRating;

    // if you don't provide context in didMount,
    // "this" will not refer to the component,
    // and this next line will throw
    this.setState({ awesomeness });
};

仅供参考：我之所以这么做，是因为我看到的是。谷歌搜索结果基本上是Ramsay基于单一mixin的演示的回声室

另外，在将这个发射器暴露给另一个组件时，我可能会让拥有它的组件提供一个接收发射器引用的函数，然后创建发射器的组件会有条件地使用发射器执行该道具

// owner's render method:
<ThingThatEmits
    onEmitterReady={(emitter) => this.thingEmitter = emitter}
/>

// inside ThingThatEmits:
componentDidMount() {
    this.emitter = new EventEmitter();

    if(typeof this.props.onEmitterReady === 'function') {
        this.props.onEmitterReady(this.emitter);
    }
}

//所有者的呈现方法：
this.thingEmitter=emitter}
/>
//内部厚度等级：
componentDidMount（）{
this.emitter=新的EventEmitter（）；
if（this.props.onemitterrady的类型=='function'）{
this.props.onemitterrady（this.emitter）；
}
}
这可能是一个很晚的答案，但我将把它发布给任何可能觉得这很有用的人

截至撰写此答案时（2020年7月），React Native自版本
0.60.0+
以来已发生了很大变化，您可以使用
EventEmitter
的实例，也可以静态调用
DeviceEventEmitter
方法


下面是一个使用
EventEmitter
的示例：


从“事件”导入{EventEmitter}；
const newEvent=neweventemitter（）；
//然后可以使用：“发射”、“打开”、“一次”和“关闭”
newEvent.on（'example.event'，（）=>{
// ...
});


另一个使用
DeviceEventEmitter
的示例：


从“react native”导入{DeviceEventEmitter}；
//然后可以直接使用：“emit”、“addListener”和“removeAllListeners”
DeviceEventEmitter.emit（'example.event'，['foo'，'bar'，'baz']）；

希望这对仍在寻找在React Native中实现自定义事件的方法的人来说很方便。
这里有人建议只使用编写组件的“旧方法”：我也有同样的问题，想知道在ES6I中是否有合适的方法来实现这一点我仍在寻找。我不愿意开始使用
react mixin
。谢谢！您的“简单演示”正是我需要看到的，以便单击它。嗨，汤姆，当我尝试调用
let test=new EventEmitter（）时它抛出
未定义不是构造函数（计算'new\u reactNative.EventEmitter（）'）
对此有什么想法吗？@Richard:None。您使用的是什么版本的react native？您确定导入正确吗？您是否尝试重新启动RN打包机？这是构建时还是运行时失败？我知道这是很晚的响应，但是您应该像这样从“EventEmitter”导入EventEmitter不像这样从“EventEmitter”导入{EventEmitter}我喜欢这个DeviceEventEmitter，我不需要创建新实例。非常感谢。DeviceEventEmitter对我来说工作得很好，但仍然很好奇为什么我找不到它