रिएक्ट नेटिव एंड्रॉइड देशी यूआई घटक

Question

में कस्टम इवेंट्स एंड्रॉइड पर मेरे रिएक्ट नेटिव ऐप में OpenStreetMap टाइल्स का उपयोग करना चाहते हैं, इसलिए मैं here. वर्णित ओएसएमड्रॉइड देशी यूआई घटक को लपेटने की कोशिश कर रहा हूं क्योंकि अधिकांश भाग यह ठीक काम कर रहा है , लेकिन मुझे यह पता लगाने में परेशानी हो रही है कि घटनाओं को सही तरीके से कैसे प्रबंधित किया जाए, विशेष रूप से onScroll और onZoom।

ओएसएमड्रॉइड के साथ, आप ईवेंट को संभालने के लिए एक विलंबित मैपलिस्ट सेट करते हैं, जो कि बहुत सरल है। मैंने पुष्टि की है कि जेएस कोड ट्रिगर होने पर उस बिंदु तक जावा-साइड को ठीक से संभाल रहे हैं। हालांकि, वे मेरे जावास्क्रिप्ट कोड को ट्रिगर नहीं कर रहे हैं।

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

मेरी जे एस कोड के प्रासंगिक हिस्सा मूल रूप से दस्तावेज में कोड जुड़ा हुआ के समान है:

पर the documentation आधार पर, मैं मेरे विचार प्रबंधक की createViewInstance विधि में जावा में ईवेंट हैंडलर्स को क्रियान्वित किया है उपरोक्त:

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}/> 
    } 
} 

कोई त्रुटि या कोई संकेत नहीं है कि कुछ भी गलत है। जावा इवेंट हैंडलर कोड सही ढंग से कहा जाता है। एक घटना होने पर जेएस कोड में कुछ भी होने का कोई संकेत नहीं है। क्या कोई जानता है कि यह सही तरीके से कैसे करें? मुझे लगता है कि मुझे यहां कुछ बुनियादी अवधारणा याद आनी चाहिए।

Answer 1

जावास्क्रिप्ट करने के लिए कस्टम घटनाओं भेजने के लिए आप RCTDeviceEventEmitter उपयोग कर सकते हैं: एक श्रोता रजिस्टर करने के लिए उपयोग कर रहा DeviceEventEmitter

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

अपने जे एस मॉड्यूल के अंदर आप बस है:

मूल निवासी पक्ष में

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}/> 
    } 
} 

उम्मीद है कि यह मदद करता है।