ReactNative调用aar文件(附:如何打开、查看aar文件内容)

转载请注明原文地址: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状态返回值)=> {提取结果});

   

    

原文地址:https://www.cnblogs.com/ygj0930/p/7275897.html