（不想看内容，想直接撸代码的，移到最后面，有下载地址）
为什么要调用原生模块？
我们来看看官网的回答：
有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用Javascript重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。
我们把React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是一个相对高级的特性，我们并不认为它应当在日常开发的过程中经常出现，但具备这样的能力是很重要的。如果React Native还不支持某个你需要的原生特性，你应当可以自己实现该特性的封装。
接下来，是个调用原生模块的例子：
一个原生模块是一个继承了ReactContextBaseJavaModule的Java类，它可以实现一些JavaScript所需的功能，我们需要创建一个：
原生模块类
看图，有个getName（）方法，这个方法是ReactContextBaseJavaModule要求实现的，返回的字符串很重要，这个返回值在JavaScript端标记这个模块。
接下来，我们需要一个方法，给JavaScript调用，如下图：
js要调用的方法
android这边还需要做一件事情，那就是注册刚才创建的模块，把刚才创建的CustomNativeModule类添加到Package类的createNativeModules方法中，如果没有注册，js那边是调用不到的，如图：
注册模块
图中，画了红线，这里面不能直接返回null，会报错，（刚创建的时候默认返回null），最好返回Collections.emptyList()。
这个package需要在MainApplication.java文件的getPackages方法中提供：
接下来，就是处理js那边了。创建一个js文件，内容如图：
nativeinterface
然后，我们看看调用出：
import NativeInterface from'./nativeInterface';
这样，就可以调用原生的Toast了。
接着，我们要获取原生里面的数据，我们看看android代码的定义：
然后，我们看看js代码的调用处：
如上图，成功获取弹Toast，失败还没写处理，成功，失败回调只能一次处理一个，不能两个同事，android代码处，成功或者失败回调需要加判断，否则报错。
除此之外，还有个调用原生组件的例子，是个textview，放到下次来讲，顺便加上点击事件相关。
全程都是图文结合，贴代码不好看，要看代码直接下载即可。
代码下载： https://github.com/niyige/justCoder
网友评论