React 调用Android原生方法

流程

Android端
  1. 创建类A继承ReactContextBaseJavaModule,并自定义JS需要调用的方法,主要需要加上 @ReactMethod注解;
  2. 创建类B实现ReactPackage接口,并实现其createNativeModules方法;
  3. 在包含React的Activity页面上使用ReactInstanceManager.builder()添加刚才实现的ReactPackage
JS端
  1. 创建A.js文件,导入NativeModules,并通过实现Android端A类的getName方法返回的字符串导出;
  2. 在需要调用的位置引入模块,执行调用。

Java代码

ToastModule.java

public class ToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

    @ReactMethod
    public void getData(String text, Callback callback) {
        callback.invoke("test", text);
    }
}

ToastReactPackage.java

public class ToastReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Activity.java

// MainReactPackage必须添加
mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new ToastReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

JS代码

ToastAn.js

import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;

UI.js

 _toast() {
    ToastExample.getData("显示吐司内容", (arg1, arg2) => {
      ToastExample.show(arg1 + arg2, ToastExample.SHORT);
    });
  }

猜你喜欢

转载自blog.csdn.net/u010259369/article/details/81541118