web-dev-qa-db-ja.com

React NativeのEventEmitterおよびSubscriber ES6構文

反応ネイティブクラスの2つのコンポーネント間のEventEmitter/Subscriber関係を実装しようとしています。次の資料を参照しているのを見ました。

これらのソリューションは、私が達成しようとしているものには十分ですが、わざわざmixins: [Subscribable.Mixin]受信側コンポーネントでSubscriberで適切に動作します。残念ながら、ES6を使用してComponentからクラスを拡張しているため、このミックスイン構文を使用できません。

私の質問は、ミックスインを使用せずに上記のソリューションをES6に実装するにはどうすればよいですか？

react-nativemixinseventemitter
16
Adam Jakiela

EventEmittersを使用するためにミックスインは必要ありません。

簡単なデモ：

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の完全な署名は、3つの引数を取ります。

EventEmitter.addListener(eventName, handler, handlerContext)

反応コンポーネントでは、おそらくそのコンテキスト引数を使用するので、ハンドラーはインライン関数ではなくクラスメソッドになり、this == component instance。例えば。：

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 });
};

参考までに、これは 悪名高いSubscribable mixin の明らかに不思議な実装を見て得たものです。 Googleの検索結果は、基本的に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);
    }
}
30
Tom

react-mixin で回避策を得ることができました。それがどれほど適切かはわかりませんが、修正なしで機能します。重要なのは、クラス定義の後に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);
1
georges