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

Question

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

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

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

如何从呈现本机 MapView 组件的 JavaScript class 调用方法？

Answer 1

好的，以下对我有用：

在Java脚本class.

render

ref

使用react-native包中的findNodeHandle方法，将获得的ref作为参数传递。 findNodeHandle方法returns一个react ID，保存。
使用 react-native 中的 UIManager.dispatchViewManagerCommand 方法，将反应 ID 作为第一个参数传递。第二个参数是命令 id。第三个参数是附加参数（可以是null）。
覆盖 ViewManager 本机 class 中的 receiveCommand 方法，这会公开组件。在这个方法中，处理命令。

示例 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 原生组件 作为见于

这应该是一种更简单、更适合未来的方法。

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

How to call a native view method from JavaScript

react-native

react-native-android