如何从JavaScript调用本机视图方法

Question

我有一个Android类,它扩展了SimpleViewManager类并封装了一个MapView.从React Native JavaScript类设置道具就像一个魅力(使用@ReactProp注释).但是,我希望能够在视图上调用方法,如下所示:

public void centerToMyLocation(MapView view) {
    view.getController().setCenter(myLocation);
}

我已经尝试使用@ReactMethod注释,获取MapViewJavaScript中的参考,然后centerToMyLocation在该对象上调用该方法.但它不起作用(我得到mapViewRef.centerToMyLocation is not a function错误).

如何从我呈现本机MapView组件的JavaScript类中调用该方法？

Answer 1

好的,以下对我有用:

1. 在JavaScript类ref的render方法中添加到本机组件.
2. 使用package中的findNodeHandle方法react-native,将获取ref的参数作为参数传递.该findNodeHandle方法返回一个反应ID,保存它.
3. 使用UIManager.dispatchViewManagerCommand方法from react-native,将react ID作为第一个参数传递.第二个参数是命令ID.第三个参数是附加参数(可以null).
4. 覆盖本机类中的receiveCommand方法ViewManager,该方法公开组件.在此方法中,处理该命令.

示例JS:

componentDidMount() {
    this.mapViewHandle = findNodeHandle(this.mapViewRef);
}

center() {
    UIManager.dispatchViewManagerCommand(this.mapViewHandle, 0, null);
}

render() {
    return (
        <MapView
            ref={(mv) => this.mapViewRef = mv} />
    );
}

示例Java:

@Override
public void receiveCommand(MapView view, int commandId, @Nullable ReadableArray args) {
    super.receiveCommand(view, commandId, args);
    if (commandId == 0) {
        if (mMyLocation != null) {
            view.getController().setCenter(mMyLocation);
        }
    }
}