转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7275897.html
ReactNative可以用来进行一些嵌入式设备的操作终端开发,比如:ATM机、自动售卖机等。其中,最重要的一步是,怎样在ReactNative所在设备,进行一系列硬件上的操作,比如:售卖机出货、ATM机吐钱?
一:底层操作串口包装
对于机器的控制,ReactNative本身当然不可能做到。这些底层的操作一般都是用C/C++来实现的。而我们要做的,是把这些C/C++函数,包装成java接口,导出为aar文件。(注意:*.jar:只包含了class文件与清单文件,不包含资源文件,如图片等所有res中的文件。*.aar:包含所有资源,class以及res资源文件全部包含)
对于底层的操作,我们不需要关心,由厂商提供或者负责嵌入式开发的人来定义。
在ReactNative中调用aar分为两部分:首先是通过原生Android代码调用aar中的接口,包装成为可供ReactNative调用的方法;然后在ReactNative代码中调用Android代码中的对应方法。
二:Android调用aar
1:首先,我们把aar文件放到项目的android目录的一个文件夹中,比如:新建一个libs文件夹。
2:然后,在android目录下的build.gradle文件中添加这个aar包路径:
allprojects {
repositories {
mavenLocal()
flatDir{
dirs "$rootDir/libs" //在这里加上这句
} ...... } }
3:在android/app目录下的build.gradle文件中依赖这个aar包
dependencies { ...... compile(name:'aar包名', ext:'aar')//加上这句 }
4:然后,就可以在android/app/src/main/java/com/xx目录下新建java类,在类中 import aar包名.类名 即可使用aar包中的各种接口。
附:如何打开、查看aar文件内容,获取其中类、接口的信息?
修改aar文件后缀为 zip ,然后解压它,可以得到一个classes.jar文件。
使用java反编译工具即可查看classes.jar包中的内容,获取供我们调用的接口信息。
三:ReactNative中的原生Android开发
1:定义原生模块,调用aar文件
在android/app/src/main/java/com/xx目录下,新建一个类文件。
定义继承ReactContextBaseJavaModule
的Java类
import aar包名.aar中类名 import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.Promise; public class 模块类 extends ReactContextBaseJavaModule { public 模块类(ReactApplicationContext reactContext) { super(reactContext); } // 要求重写getName方法,返回一个字符串作为这个原生模块名,用于在JavaScript端标记、使用这个模块 @Override public String getName() { return "模块名"; } // 定义供JavaScript调用的方法,需要使用注解@ReactMethod,返回值是void! @ReactMethod public void 方法名() { 通过 aar中类名.方法名() 调用aar中接口。 } 。。。。。。 }
2:注册模块
在模块类文件同级目录下,新建一个 模块名Package.java 的类文件,重写几个方法:
import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class 模块名Package implements ReactPackage { public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new 模块类(reactContext));/添加模块 return modules; } }
3:在IDE自动创建好的android/app/src/main/java/com/项目名 目录下的MainApplication.java中添加Package实例
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new 模块名Package() //在这里添加package实例 ); }
4:另外,也可以在android/app/src/main/java/com/项目名 目录下自动创建的MainActivity类中定义一些随着app生命周期而触发的方法。比如:onCreate()等等Android原生Activity生命周期函数。
四:在ReactNative的js文件中调用原生Android模块内方法
1:导入本地模块库
在js文件头导入本地模块库
import { NativeModules } from 'react-native';
2:通过 NativeModules.模块名.方法名() 进行本地模块内函数的调用
3:获取调用结果
提供给js调用的原生android方法的返回类型必须是void,所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。
使用回调函数:
1)android代码中定义的方法,传进回调函数作为参数
// android端代码 @ReactMethod public void 方法名(...参数,Callback callback){ ...... callback(...);//调用回调函数 }
2)js端调用方法时,除了传递数据参数,还传递回调函数获取调用结果
// RN端调用代码 NativeModules.模块名.方法名(...参数,(回调函数参数)=>{回调函数体)});
使用Promise发送异步任务状态进行回调:
向模块方法传递数据一个promise对象,模块方法中通过promise返回执行状态以达到反馈执行结果的目的:
1)android端
// android端代码 @ReactMethod public void 方法名(数据参数, Promise promise){ try{ if(...){ promise.resolve(map);//正常返回,并且携带返回结果 }else{ promise.reject(结果信息);//返回另一种结果 } }catch(IllegalViewOperationException e){ promise.reject(异常信息);//异常退出 } }
2)js端:传递一个匿名promise对象参数,使用 then(resolveCallBack,rejectCallBack) 来接受返回结果并执行相应回调函数
NativeModules.模块名.方法名(数据参数,new Promise().then((resolve状态返回值)=> {提取结果}, (reject状态返回值)=> {提取结果});