ReactNative 原生模块

首先：参照官网的原生模块和QZon的一篇文章：https://zhuanlan.zhihu.com/p/20259704

image.png

• Java和JS调用的顺序是通过C++的中间件翻译来实现的，js的代码最终翻译为Java的代码执行
• Java和js的调用都有个配置列表，以供他们互相调用，包括配置名称、id等等

下面以Android中Toast写一个简单的DEMO实现js和Java交互

Step 1

首先用Android Studio 打开RN工程目录下的android 工程

image.png

然后在as的工程目录下面新建一个java类XCToast继承ReactContextBaseJavaModule，RN工程里面所有的Java本地代码都在android目录下面编写，之后RN服务会自动为我们打包转化

• 在as中新建的类中定义我们的需要的方法showToast();

public class XCToast extends ReactContextBaseJavaModule {

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

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

    @ReactMethod
    public void showToast(String str) {
        Toast.makeText(getCurrentActivity(),str,Toast.LENGTH_SHORT).show();
    }
}

getName（）是java本地module的名称，之后通过C++注册之后，就可以实现js和java的互掉。
showToast是我们自己编写的方法，要加上@ReactMethod注解才能被RN识别调用，参数str是从js传递过来显示子在toast中的内容

• 下一步需要创建一个类继承于ReactPackage，这个类用于把我们所有本地的module注册进去，才可以在js中调用

public class XCPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> list = new ArrayList();
        list.add(new XCToast(reactContext));
        return list;
    }
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return null;
    }

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

• 然后需要在MainApplication中把Package添加进去

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

这样才算正式的把我们的写的module注册到应用中去。可以看到RN的默认是有一个MainReactPackage的，点击进去的源码看到有RN定义了许多默认的模块来提供自己的通讯。

public List<ModuleSpec> getNativeModules(final ReactApplicationContext context) {
    return Arrays.asList(
      new ModuleSpec(AccessibilityInfoModule.class, new Provider<NativeModule>() {
        @Override
        public NativeModule get() {
          return new AccessibilityInfoModule(context);
        }
      }),
      new ModuleSpec(AppStateModule.class, new Provider<NativeModule>() {
        @Override
        public NativeModule get() {
          return new AppStateModule(context);
        }
      }),
      new ModuleSpec(AsyncStorageModule.class, new Provider<NativeModule>() {
        @Override
        public NativeModule get() {
          return new AsyncStorageModule(context);
        }
      }),
      new ModuleSpec(CameraRollManager.class, new Provider<NativeModule>() {
        @Override
        public NativeModule get() {
          return new CameraRollManager(context);
        }
      }),
.....

Step 2

接下来是js层面的代码：
新建一个js文件，进行再次封装：

mport {NativeModules} from 'react-native'

export default NativeModules.XCToast;

之后就可以导入调用了：

XCToast.show("js调用java")

此处导入的如果是子模块就需要{}包裹
大功告成！