当前位置 : 主页 > 网页制作 > React >

react-native – 如何在Android中实现React Native UI组件方法

来源:互联网 收集:自由互联 发布时间:2021-06-15
我很清楚,对于本机反应原生模块,我们可以使用@ReactMethod导出一个方法并从JSX调用它,但是我们如何在react-native本机UI组件中做同样的事情呢? 在文档中我只看到提到@ReactProp. 如果@React
我很清楚,对于本机反应原生模块,我们可以使用@ReactMethod导出一个方法并从JSX调用它,但是我们如何在react-native本机UI组件中做同样的事情呢?

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

谢谢.

好的,我最终创建了一个模块,并在其构造函数上传递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
        );
    }
}

它就像一个魅力.

网友评论