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)