我想在我的安卓系统上的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代码中没有任何发生的迹象。有没有人知道怎么做才是正确的?我觉得我一定是遗漏了一些基本概念。
发布于 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}/>
}
}
希望能有所帮助。
https://stackoverflow.com/questions/35545598
复制相似问题