博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何创建一个依赖Android AAR文件的React Native组件
阅读量:5884 次
发布时间:2019-06-19

本文共 5764 字,大约阅读时间需要 19 分钟。

hot3.png

在React Native模块项目中如何使用AAR文件?官网没有相关信息。只能通过Google,StackOverflow和GitHub去寻找答案。这里分享下如何使用Dynamsoft提供的barcode AAR文件创建一个React Native barcode组件,以及如何在React Native项目中使用这个组件。

为Android创建React Native桥接组件

要调用AAR文件,肯定要写Java代码。使用Android Studio来辅助完成React Native模块并不是一帆风顺的。

错误:Plugin with id ‘com.android.library’ not found

之前我编写了一个'hello world'组件,build.gradle是这样的:

apply plugin: 'com.android.library'     android {    compileSdkVersion 23    buildToolsVersion "25.0.0"      defaultConfig {        minSdkVersion 16        targetSdkVersion 23        versionCode 1        versionName "1.0"    }} dependencies {    compile "com.facebook.react:react-native:+" }

通过React Native命令行去编译运行完全没有问题,可是导入到Android Studio的时候会报错。

gradle android library error

要解决这个问题,需要加一点东西:

apply plugin: 'com.android.library'  buildscript {     repositories {         jcenter()     }     dependencies {         classpath 'com.android.tools.build:gradle:2.3.0'     } } allprojects {    repositories {         mavenLocal()         jcenter()         maven {             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm             url "$rootDir/../node_modules/react-native/android"         }        flatDir{            dirs "$rootDir/lib"        }    }} android {    compileSdkVersion 23    buildToolsVersion '25.0.0'     defaultConfig {        minSdkVersion 16        targetSdkVersion 23        versionCode 1        versionName "1.0"    }} dependencies {    compile 'com.facebook.react:react-native:+'    compile(name:'DynamsoftBarcodeReader', ext:'aar')}

通常情况下在Android项目中要使用AAR文件可以通过菜单,把AAR文件当作module导入进来,然后在项目设置中关联。这样比较麻烦。另一种比较干净的方法就是设置库的路径,然后在build.gradle中添加:

compile(name:'DynamsoftBarcodeReader', ext:'aar')

找不到AAR文件

Android Studio顺利编译模块工程之后,在React Native工程中使用下面的命令导入组件,构建工程:

npm installreact-native linkreact-native run-android

这个时候会碰到下面的错误:

react native aar error

找不到模块中使用的AAR文件。解决方法是在React Native工程的build.gradle中加入模块路径:

buildscript {    repositories {        jcenter()    }     dependencies {        classpath 'com.android.tools.build:gradle:2.2.3'    }} allprojects {    repositories {        mavenLocal()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }        flatDir{            dirs "$rootDir/../node_modules/react-native-dbr/android/lib"        }    }}

重新执行“react-native run-android”就可以了。

使用React Native创建barcode app

UI元素

UI比较简单,一个按钮和一个文本。点击按钮触发barcode扫描,然后把结果显示在文本上。

constructor(props) {    super(props);    this.state = {      result: 'N/A'    };     this.onButtonPress = this      .onButtonPress      .bind(this);  }   onButtonPress() {    BarcodeReaderManager.readBarcode('C6154D1B6B9BD0CBFB12D32099F20B35', (msg) => {      this.setState({result: msg});    }, (err) => {      console.log(err);    });  };   render() {    return (      

如何识别barcode

这里的实现逻辑是把barcode识别放在一个独立的中。通过桥接的代码去启动这个Activity。检测完之后在onActivityResult中返回结果:

private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {         @Override         public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {             if (requestCode == REQUEST_CODE) {                 if (mResultCallback != null) {                     if (resultCode == Activity.RESULT_OK) {                        JSONObject obj = new JSONObject();                        try {                            obj.put(TEXT, intent.getStringExtra("SCAN_RESULT"));                            obj.put(FORMAT, intent.getStringExtra("SCAN_RESULT_FORMAT"));                        } catch (JSONException e) {                            Log.d(LOG_TAG, "This should never happen");                        }                        mResultCallback.invoke(obj.toString());                     } else if (resultCode == Activity.RESULT_CANCELED) {                        Toast.makeText(getReactApplicationContext(), "Cancelled", Toast.LENGTH_LONG).show();                    } else {                        Toast.makeText(getReactApplicationContext(), "Unexpected error", Toast.LENGTH_LONG).show();                    }                }            }        }     };     @ReactMethod     public void readBarcode(String license, Callback resultCallback, Callback errorCallback) {         mResultCallback = resultCallback;        Activity currentActivity = getCurrentActivity();         if (currentActivity == null) {            errorCallback.invoke("Activity doesn't exist");            return;        }         Intent cameraIntent = new Intent(currentActivity.getBaseContext(), DBR.class);        cameraIntent.setAction("com.dynamsoft.dbr");        cameraIntent.putExtra("license", license);        cameraIntent.setPackage(currentActivity.getApplicationContext().getPackageName());        currentActivity.startActivityForResult(cameraIntent, REQUEST_CODE);    }

记得在AndroidManifest.xml中加入需要使用的权限:

导入模块的基本步骤

创建一个新工程:

react-native init NewProject

在package.json中添加依赖模块:

"dependencies": {    "react": "16.0.0-alpha.6",    "react-native": "0.43.3",    "react-native-dbr":"file:../"},

然后通过“npm install”安装。也可以通过网络安装:

npm i react-native-dbr --save

关联依赖:

react-native link

android/build.gradle中添加AAR的路径:

flatDir {    dirs "$rootDir/../node_modules/react-native-dbr/android/lib"}

index.android.js中使用JS接口:

import BarcodeReaderManager from 'react-native-dbr'; BarcodeReaderManager.readBarcode('C6154D1B6B9BD0CBFB12D32099F20B35', (msg) => {    this.setState({result: msg});}, (err) => {    console.log(err);});

App使用

运行程序:

react native barcode app

点击按钮:

react native barcode detection

获得结果:

react native barcode result

源码

 

转载于:https://my.oschina.net/yushulx/blog/886804

你可能感兴趣的文章
在Eclipse配置Tomcat服务器+JSP实例创建
查看>>
一种Web服务的go语言实现
查看>>
转载-- 魔兽哈希算法封装和测试
查看>>
下载文件
查看>>
(算法)排序
查看>>
Ajax传值原理.aspx文档
查看>>
一个微软的DDD架构图
查看>>
使用git时出现Please make sure you have the correct access rights and the repository exists.问题已解决。...
查看>>
分析称微软不应再为WP弱势地位推脱 借口已失效
查看>>
Spring核心实现篇
查看>>
css动态样式
查看>>
Sql Server查询性能优化之走出索引的误区
查看>>
回忆下高中的数学归纳法
查看>>
CentOS7 'Username' is not in the sudoers file. This incident will be reported
查看>>
HashMap,HashTable,HashSet区别(转)
查看>>
关于php上传文件
查看>>
360浏览器内核控制标签meta说明
查看>>
android AsyncTask
查看>>
poj 3225 【线段树】
查看>>
序列化
查看>>