RN7_React-Native实战(2)

RN7_实战（2）

React Native Android原生模块引入

参考：

1、 http://www.devio.org/2017/01/22/React-Native-Android%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98-%E6%95%99%E7%A8%8B-%E5%BF%83%E5%BE%97/

2、 http://reactnative.cn/docs/0.41/native-modules-android.html#content

3、 http://www.liuchungui.com/blog/2016/05/08/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/

 

构建React Native Android原生模块的三步骤：

1.       编写原生模块的相关Java代码；

2.       暴露接口与数据交互；

3.       注册与导出ReactNative原生模块；

编写原生模块的相关Java代码

首先我们用AndroidStudio打开React Native项目根目录下的android目录。

（在用AS打开的时候别用别的编译器打开这个项目。因为AS在更新gradle或者其他东西的时候要删除文件导致删除不了）

 

暴露接口与数据交互；

1、为了能让我们的原生方法让RN知道，我们需要在AS中建立一个ReactContextBaseJavaModule类，这个类专门负责告诉RN原生有什么方法可用。

2、最后将上面的这个类暴露出来：

 

注册与导出React Native原生模块

结果：

原生的项目结构：

 

 

线程的使用

在ReactNative中，JS模块运行在一个独立的线程中。在我们为React Native开发原生模块的时候，如果有耗时的操作比如：文件读写、网络操作等，我们需要新开辟一个线程，不然的话，这些耗时的操作会阻塞JS线程。在Android中我们可以借助AsyncTask来实现多线程。

 

React Native原生模块向JS传递数据

参考：http://www.devio.org/2016/09/29/React-Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/

通过Callbacks的方式

原生内代码

Js模块中代码

 

通过Promises的方式

原生内代码；

JS模块中代码

方式1：同步形式

通过ES7的新特性async/await来修饰了test方法，来以同步方式调用原生模块的measureLayout方法。

 

代码2：普通形式

通过发送事件的方式

原生内代码

通过RCTDeviceEventEmitter，来向JS传递事件。

JS模块中代码

JS中通过DeviceEventEmitter注册监听了名为“onScanningResult”的事件，当原生模块发出名为“onScanningResult”的事件后，绑定在该事件上的onScanningResult = (e)会被回调。 然后通过e.result就可获得事件所携带的数据。

三种方式对比