React Native通信原生Android

序言：

最近一直在拓展自己的技术栈，提高提高自己的技术眼界。8月份投了一家上海某公司的实习，Android方面的知识点聊起来都很nice，各种源码分析和框架等等，然后问了一个rn调用原生的问题，因为才刚接触，还处在搭环境，所以没回答上来，还是有点可惜的，但是，现在知道了，发现有点晚了.......，不过还是很享受面试的过程，他能唤醒我对知识的渴望，不为每天工作的忙碌而失去初心。

今天讲的这个例子虽然官网有，但是官网篇幅比较僵硬，都是在引导一个对代码的过程，跟ctrl+c、ctrl+v没什么区别，无法引起读者举一反三。还有一个比较严重的是，逛博客的时候看到圈内比较出名博主的博客，有些博文直接照搬官网，没有自己的理解概念，这样的博文简直就是灌水。

这次的博文，读者可以先看看官网的例子，然后在看看我的步骤，你会有一种豁然开朗的感觉。

步骤

1

打开项目找共同点：

先通过Android Studio打开rn创建的android项目，然后我们先看看整个项目的结构和代码，我们主要看MainApplication这了类，这个类的核心在getReactNativeHost方法，他拿到了rn与native通信的的手柄。我们先看看ReactNativeHost的抽象方法getPackages，我们先点击去看一下这个方法，根据方法的注释（If your app uses additional views or modules besides the default ones, * you'll want to include more packages here.）除了默认添加的MainReactPackage外，如果是想给app增加widget控件或是通信模块的话，可以使用这个方法，也就是给这个list集合增加ReactPackage元素，我们可以看看官网给的ToastExample例子，他让我们自定义个类实现ReactPackage接口，然后将这个自定义类增加到getPackages集合里面，我们对比下MainReactPackage，他继承的是LazyReactPackage，实现的也是ReactPackage接口 ，只不过MainReactPackage通过实现抽象方法来将集合交给父类的createNativeModules方法，还是挺Lazy的，我们可以看看MainReactPackage的getNativeModules方法，里面添加了好多的Moudle，我们随机点一个看看

DialogMoudle实现了ReactContextBaseJavaModule类，和官网的例子如出一辙，所以，接下来我们应该知道添加ReactPackage的意义了，下图是写的代码

createViewManagers方法就是之前注释说的，增加view控件用的

2

继承ReactContextBaseJavaModule：

先来看看例子，然后再来说

这个部分我稍微修改了下官网给的demo，不晓得有没有跑过官网例子的读者没，你一直点击按钮去弹出toast，会不会发现屏幕一直在闪Toast，即使退出界面他还在闪？这明显是一次不好的体验，我们无论是点击一次或是多次连续点击，应该只显示一次才是我们的目的，官网给的例子会频繁的去创建Toast对象。

我们一路一层层跟随父类下去，最终会看到NativeModule接口，这个地方我为什么要贴出来呢？目的是要大家看看上面的注释，很多时候，我们看注释会更加明朗这些方法或是类的作用。

先看看getName的注释，然后我们再看例子的getName方法，返回的ToastExample是提供给js去调用的，getConstants方法主要是向js传递常量，initialize是初始化moudle的时候调用的，这个地方，我去初始化了Toast对象，避免像官网那样频繁的去创建对象，最终，我们来看看show方法，这个方法必须实现@ReactMethod注解，这有点像webview与原生通信给方法实现@JavascriptInterface注解一样，这个方法主要是暴露给js去调用的

3

调用原生方法：

先导入NativeModules模块，然后let引用之前我们在getName书写的moudle名称，最终，我们调用响应原生的方法。

4

总结：

一、创建类继承ReactPackage，实现抽象方法

二、将ReactPackage实现类添加到MainApplication的getPackages方法

三、创建类实现ReactContextBaseJavaModule，实现getName方法，添加moudle的名称，给自定义方法增加@ReactMethod注解供js调用

四、将这个Moudle添加到ReactContextBaseJavaModule实现类的createNativeModules集合里面

五、js通过NativeModules.moudle名称.moudle方法

整个过程下来其实不难，但是明白其中的原理还是十分重要的，不仅要知其然还要之气所以然，虽然刚接触不多，但是，我们可以根据生成的demo去揣摩他的构造