ウェブサイト検索

TypeScript - React Native イベントでの RxJS fromEventPattern


私はRxJSを使ってReact Nativeでネイティブイベントをフィルタリングしようとしています。私はEventEmitterを公開しているreact-native-ble-managerを使用しています。基本的に、RxJSを使わない場合、私は以下のようにしています(ここでは関連するコードのみを示しています):

import React from 'react';
import RX from 'reactxp';
import { AppState, Platform, NativeModules, NativeEventEmitter, EmitterSubscription, PermissionsAndroid, ListView } from 'react-native';
import BleManager, { Peripheral } from 'react-native-ble-manager';

const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);

export class App extends RX.Component<IAppProps, IAppState> {

      private handlerDiscover!: EmitterSubscription;
      private  handlerStop!:EmitterSubscription;
      private  handlerDisconnect!:EmitterSubscription;
      private  handlerUpdate!:EmitterSubscription;

      componentDidMount() {
        AppState.addEventListener('change', this.handleAppStateChange);

        BleManager.start({ showAlert: false });

        this.handlerDiscover = bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', this.handleDiscoverPeripheral);
        this.handlerStop = bleManagerEmitter.addListener('BleManagerStopScan', this.handleStopScan);
        this.handlerDisconnect = bleManagerEmitter.addListener('BleManagerDisconnectPeripheral', this.handleDisconnectedPeripheral);
        this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic);
      }
      componentWillUnmount() {
        this.handlerDiscover.remove();
        this.handlerStop.remove();
        this.handlerDisconnect.remove();

      }
      handleUpdateValueForCharacteristic = (data:any) => {
        console.log('Received data from ' + data.peripheral + ' characteristic ' + data.characteristic + ' length ' + data.value.length + ' values ' + data.value);
       }
    }

BLEペリフェラルに接続され、データ取得を開始すると、矢印関数 handleUpdateValueForCharacteristic がデータと共に呼び出されます。それは正常に動作しています。

今、私はRxJSを使ってイベントをフィルタリングしたいです。なぜなら、毎秒最大200件のイベントを受け取る可能性がありますが、そのうちの4分の1にしか興味がないからです。

私は fromEventPattern の使い方をどうしても理解できません。

これまでに試したことは以下の通りです:

クラスにいくつかのハンドラー関数を追加しました:

  private addHandler:Function = (handler:NodeEventHandler):any => {
    this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', handler);
    return this.handlerUpdate;
  }

  private removeHandler:Function = (handler:EmitterSubscription, _signal?:any) => {
    handler.remove();
  }

componentDidMount() の中で:

this.emitter = fromEventPattern<any>(this.addHandler(this.handleUpdateValueForCharacteristic), this.removeHandler(this.handlerUpdate));
this.emitter.subscribe(...);

しかし、サブスクライブは次のエラーで失敗します:

addHandler は関数ではありません。