Question

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

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

我尝试使用@ReactMethod注释，在JavaScript中获取MapView的参考，然后在该对象上调用centerToMyLocation方法。但它不起作用（我得到mapViewRef.centerToMyLocation is not a function错误）。

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

Answer 1

好的，以下内容对我有用：

在JavaScript类的ref方法中向本机组件添加render。
使用findNodeHandle包中的react-native方法，将获得的ref作为参数传递。 findNodeHandle方法返回一个反应ID，保存它。
使用UIManager.dispatchViewManagerCommand中的react-native方法，将反应ID作为第一个参数传递。第二个参数是命令ID。第三个参数是附加参数（可以是null）。
覆盖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);
        }
    }
}

Answer 2

这是另一种方法：

您必须创建一个兄弟 UI原生模块以伴随 UI原生组件，如this SO answer

中所示

这应该是一种更容易且更具前瞻性的方法。

如何从JavaScript

2 个答案: