如何在Android中实现React Native UI组件方法

Question

我很清楚,对于本机本机模块,我们可以使用它@ReactMethod来导出一个方法并从JSX调用它,但是我们如何在react-native本机UI组件中做同样的事情呢？

在文档中我只看到@ReactProp被提及.如果@ReactMethod不起作用,如何从JSX访问我的本机UI组件的属性呢？(在iOS上,这可以在原生ui组件RCT_EXPORT_METHOD上完成,但在Android上是类似的可能吗？)

谢谢.

Answer 1

如果您只需要支持 Android，现有的答案非常有效，但当我尝试与 iOS 集成时，我发现它不起作用。我花了很多时间试图将这个方法应用到 iOS 中，所以我会推荐我想到的方法：使用UIManagerreact-native 附带的方法。

反应本机组件

// ComponentWithNativeFunctionality.js

import {UIManager, findNodeHandle} from 'react-native';

class ComponentWithNativeFunctionality extends React.Component {
  const myRef = React.createRef();

  functionToCall = () => {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this.myRef.current),
      "nameOfFunctionToCallInNativeLand",
      [/* additional arguments */]
    );
  }

  render() {
    return <NativeComponentView ref={this.myRef} />
  }
}

安卓

// YourViewManager.java

public class YourViewManager extends SimpleViewManager<YourView> {
    // ...

    @Override
    public void receiveCommand(@NonNull YourView view, String commandId, @Nullable ReadableArray args) {
        super.receiveCommand(view, commandId, args);
            switch (commandId) {
                case "nameOfFunctionToCallInNativeLand":
                    view.nameOfFunctionToCallInNativeLand();
                    break;
            }
        }
    }
}

iOS（使用 Swift）

1. 添加#import "React/RCTUIManager.h"到您的Bridging-Header.h

// YourViewManager.m

@interface RCT_EXTERN_MODULE(YourViewManagerClass, RCTViewManager)

//...

RCT_EXTERN_METHOD(
    nameOfFunctionToCallInNativeLand: (nonnull NSNumber *)node
)

@end

// YourViewManagerClass.swift

@objc(YourViewManagerClass)
class YourViewManagerClass: RCTViewManager {
    @objc func nameOfFunctionToCallInNativeLand(_ node: NSNumber) -> Void {
        DispatchQueue.main.async {
            let component = self.bridge.uiManager.view(
              forReactTag: node
            ) as! MisnapCameraView
            component.nameOfFunctionToCallInNativeLand()
        }
    }
}

另请注意：您不能像使用模块那样传递 Promise。您必须传入 JS 中生成的唯一 ID，然后一旦您的操作完成，就触发一个事件，将结果冒泡回 JS，并将 ID 附加到该事件。

Answer 2

好的,我最终创建了一个模块,并在其构造函数上传递UI组件引用:

这是我的UI组件:

public class RCTACCalendarManager extends ViewGroupManager <RCTACCalendar> {
    public static final String REACT_CLASS = "RCTACCalendar";
    private RCTACCalendar calendarInstance;
    public RCTACCalendarManager(ReactApplicationContext reactContext) {
            super();
        }

        @Override
        public String getName() {
            return REACT_CLASS;
        }


        @Override
        public RCTACCalendar createViewInstance(ThemedReactContext context) {
            calendarInstance = new RCTACCalendar(context);
            return calendarInstance;
    }

    public RCTACCalendar getCalendarInstance() { // <-- returns the View instance
        return calendarInstance;
    }

}

这是我为该组件创建的模块:

public class RCTACCalendarModule extends ReactContextBaseJavaModule {

    private RCTACCalendar calendarInstance;

    public RCTACCalendarModule(ReactApplicationContext reactContext, RCTACCalendarManager calManager) {
        super(reactContext);
        if (calManager != null) {
            calendarInstance = calManager.getCalendarInstance();
        }

    }

    @Override
    public String getName() {
        return "ACCalendarManager";
    }

    @ReactMethod
    public void mySuperDuperFunction(Promise promise) {
        if (calendarInstance  != null) {
            calendarInstance.mySuperDuperFunction(promise); // <-- Magic
        }
    }
}

以下是我在Package声明中将这两者结合在一起的方法:

public class RCTACCalendarPackage implements ReactPackage {

    private RCTACCalendarManager calManager;

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        if (calManager == null) {
            calManager = new RCTACCalendarManager(reactContext);
        }
        return Arrays.<NativeModule>asList(
                new RCTACCalendarModule(reactContext, calManager)
        );

    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        if (calManager == null) {
            calManager = new RCTACCalendarManager(reactContext);
        }
        return Arrays.<ViewManager>asList(
            calManager
        );
    }
}

它就像一个魅力.