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