React-Native与原生之间的交互简介

JavaScript调用原生步骤：

1.创建原生java类

a、Js通过React.NativeModules.${getName()}的返回值访问本模块，例如:NativeModules.ToastModule

b、被Js调用的函数必须有@ReactMethod,为反射提供条件

public class ToastModule extends ReactContextBaseJavaModule {
private final String COMPONENT_NAME = "ToastModule";

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

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

@ReactMethod
public void showToast(String s){
Toast.makeText(getReactApplicationContext(), s + "ToastModule.showToast(String s)", Toast.LENGTH_SHORT).show();
}
}

2.注册模块的创建与添加

2-1、（如果存在注册模块类则直接进入2-2）创建注册模块类，实现ReactPackage接口

2-2、 修改注册模块，例如:

public class MReactPackage 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();
}
}

3.在MainApplication.java添加2中的注册包类的实例

protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MReactPackage()
);
}

4.Js中调用：

import {
NativeModules
}from 'react-native';
......
var ToastModule = NativeModules.ToastModule;
ToastModule.showToast("hello")

官方文档：ReactNative原生交互(android)