React Native Android本机UI组件中的自定义事件
React Native Android本机UI组件中的自定义事件
提问于 2016-02-22 11:59:27
我想在我的安卓系统上的React Native应用程序中使用OpenStreetMap tiles，所以我正在尝试包装OSMDroid原生UI组件，就像here.所描述的那样，在很大程度上它工作得很好，但我在弄清楚如何正确处理事件，特别是onScroll和onZoom时遇到了麻烦。
使用OSMDroid，您可以设置一个DelayedMapListener来处理事件，这非常简单。我已经确认，在JS代码应该被触发之前，Java端的事件处理是正确的。但是，它们不会触发我的JavaScript代码。
基于the documentation，我已经在视图管理器的createViewInstance方法中用Java语言实现了事件处理程序：
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代码的相关部分与上面链接的文档中的代码基本相同：
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代码中没有任何发生的迹象。有没有人知道怎么做才是正确的？我觉得我一定是遗漏了一些基本概念。
回答 1
Stack Overflow用户
发布于 2016-04-25 21:47:35
要将自定义事件发送到Javascript，您可以使用RCTDeviceEventEmitter：
在原生方面：
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}/>
}
}希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35545598
复制相关文章
相似问题