リアクションネイティブAndroidネイティブUIコンポーネントのカスタムイベント

Question

私はAndroidのリアクションネイティブアプリでOpenStreetMapタイルを使用したいので、OSMDroidのネイティブUIコンポーネントをラップしようとしていますhere.ほとんどの場合、うまくいきますしかし、イベントを正しく処理する方法、具体的にはonScrollとonZoomを調べることに問題があります。

OSMDroidでは、イベントを処理するためにDelayedMapListenerを設定します。これはかなり簡単です。 JSコードがトリガーされるべきポイントまでイベントが正しくJava側で処理されていることを確認しました。ただし、JavaScriptコードをトリガーしていません。

map.setMapListener(new DelayedMapListener(new MapListener() { 
    public boolean onScroll(ScrollEvent event) { 
     WritableMap eventData = Arguments.createMap(); 

     // Fill in eventData; details not important 

     ReactContext reactContext = (ReactContext)map.getContext(); 
     reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
      map.getId(), 
      "topChange", 
      eventData); 

     return true; 
    } 

    public boolean onZoom(ZoomEvent event) { 
     // Basically the same as above 
    } 
}, 100)); 

私のJSコードの関連部分がリンクドキュメント内のコードと基本的には同じである：

はthe documentationに基づいて、私は私のビューマネージャのcreateViewInstance方法でJavaでのイベントハンドラを実装しました上：

class OSMDroidMapView extends Component { 
    constructor(props) { 
     super(props); 
     this._onChange = this._onChange.bind(this); 
    } 

    _onChange(event: Event) { 
     console.log(event); 
     // Handle event data 
    } 

    render() { 
     return <OSMDroidMapView {...this.props} onChange={this._onChange}/> 
    } 
} 

エラーか何かが間違っているという兆候はありません。 Javaイベントハンドラコードが正しく呼び出されます。イベントが発生したときにJSコードに何も起こっているという兆候はありません。誰でもこれを正しく行う方法を知っていますか？私はここでいくつかの基本コンセプトを欠いているように感じる。

ネイティブ側では：あなたがRCTDeviceEventEmitterを使用することができますJavaScriptにカスタムイベントを送信するために

Answer 1

import com.facebook.react.modules.core.DeviceEventManagerModule; 

... 

public boolean onScroll(ScrollEvent event) { 
    WritableMap eventData = Arguments.createMap(); 

    // Fill in eventData; details not important 

    ReactContext reactContext = (ReactContext)map.getContext(); 
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) 
       .emit("YouCustomEventName", eventData); 

    return true; 
} 

あなたのJSモジュール内部であなただけのDeviceEventEmitterを使用してリスナーを登録する必要があります。

class OSMDroidMapView extends Component { 
    constructor(props) { 
     super(props); 
     this._onChange = this._onChange.bind(this); 
    } 

    componentWillMount() { 
     DeviceEventEmitter.addListener('YouCustomEventName', this._onChange); 
    } 

    componentWillUnmount() { 
     DeviceEventEmitter.removeListener('YouCustomEventName', this._onChange); 
    } 

    _onChange(event: Event) { 
     console.log(event); 
     // Handle event data 
    } 

    render() { 
     return <OSMDroidMapView {...this.props} onChange={this._onChange}/> 
    } 
} 

希望します。