React Native调用Android原生代码实现车牌识别功能【附效果图附源码】
来源:互联网 发布:中国海洋大学网络登录 编辑:程序博客网 时间:2024/05/16 23:41
转载请注明出处,原文地址:http://blog.csdn.net/lucherr/article/details/71908180
这段时间研究了下React Native,Facebook推出的,结合了Web应用和Native应用的优势,可以使用JavaScript来开发iOS和Android原生应用,决定简单研究下,于是开始搭建环境,编写HelloWorld,完成后又觉得HelloWorld过于简单(执行完命令你就拥有一个HelloWorld了),根本没有领会到RN在项目中的应用,刚好前段时间研究了车牌识别,所以决定把RN和车牌识别功能集成到一起折腾下,更深入的了解下RN。由于之前没有用过RN,在编写的过程中踩了很多坑,查资料的时候才发现原来好多人都踩过,如果你导入源码后不能直接运行,我只能告诉你这是正常的:)
注:本文主要专注于源码的大概介绍,讲的不是很详细,需要大家阅读源码体会,文末会给出源码地址,如果你想先体验一下效果,可以下载apk安装试试,文末也会给出下载地址。
1.http://reactnative.cn
目前关于RN的资料已经有很多了,作者主要是在该网站上学习RN的,讲的很详细
2.https://github.com/liuruoze/EasyPR
基于openCV的中文车牌识别系统,运行在Windows系统上,详细介绍可以查看项目的Readme
3.https://github.com/linuxxx/EasyPR
基于EasyPR移植的Android版本,本demo车牌识别部分就是基于该源码进行开发的,对拍照部分重新进行了开发,优化了照片的分辨率以及自动对焦功能,增加了车牌识别度。
4.其他相关资料的作者,有很多关于RN踩坑的:)
准备工作:
需要搭建好Android开发环境,准备好AS开发工具(Git环境可选)
需要搭建好NDK开发环境
需要搭建好RN开发环境
然后就可以开干了
作者的主要开发环境如下:
System: Ubuntu14.04
Android Studio: V2.3.1
Gradle: V2.14.1
NDK: android-ndk-r14b
(一)老规矩,先看下效果图(本来准备做动图的,原谅我太懒--!):
1.图片车牌号识别
2.真实车牌号识别,车牌号最后一位打码,你懂的(等红灯的时候也不忘测试,有没有很感动^ ^)
(二)源码目录简介
1.RN源码目录结构
由文件的时间可知demo其实是在四月份就编写的,为什么现在才发出来?原谅我太任性:)
如果你研究过RN的HelloWorld,对这个目录应该就没有疑问了,这是RN源码的根目录,通过react-native的init命令直接初始化来的(正常应该还有ios文件夹,我移除了)
2.Android原生代码目录结构
展开RN目录中android文件夹,这是原生代码的根目录,Android Studio结构的,也就意味着接下来是使用AS来开发原生源码
OpencvNative目录里存放着OpenCV相关的源码,该源码是在EasyPR_Android的jni部分引入的,EasyPR_Android都已经配置好了,你只需要有ndk编译环境就可以拥有
(三)导入方法简介
对源码的开发工作分两部分:
一是RN部分,这部分源码不需要导入AS,直接编辑后运行即可,作者使用vscode进行编辑。
二是Android原生代码部分,这部分源码可以导入AS后进行编辑和编译,方法同正常的AS项目。
导入成功后你看到的界面是这个样子的:
注:导入后需要修改ndk路径,在app/build.gradle里,把下面代码中两处红色字体部分的ndk路径修改为自己的路径:
task buildNative(type: Exec, description: 'Compile JNI source via NDK') { commandLine "/home/lucher/main/softs/ndk/android-ndk-r14b/ndk-build", '-C', file('src/main/jni').absolutePath, // Change src/main/jni the relative path to your jni source '-j', Runtime.runtime.availableProcessors(), 'all', 'NDK_DEBUG=0'}task cleanNative(type: Exec, description: 'Clean JNI object files') { commandLine "/home/lucher/main/softs/ndk/android-ndk-r14b/ndk-build", '-C', file('src/main/jni').absolutePath, // Change src/main/jni the relative path to your jni source 'clean'}
(四)运行方法
完成了源码的导入工作后,就可以运行看看效果了,可以使用AS编译apk的方法打出apk后安装运行,也可以通过AS的运行功能直接运行,还可以通过RN提供的方法运行,在此列举如下两种方法:
方法一,通过AS运行:
下面所说的命令可以使用系统的Terminal执行,也可以使用AS的Terminal执行
1.如果是在真机上调试需要执行如下命令:
$ adb reverse tcp:8081 tcp:8081
否则运行后页面可能会出现:Could not get BatchedBridge,make sure your bundle is packaged correctly的错误
2.启动RN服务,执行如下命令(如果使用系统Terminal需要先cd到RN源码的根目录):
$ npm start
执行完这两个命令后就可以使用AS的Run命令来运行程序了,成功启动服务的结果如下:
方法二,通过RN运行:
该方法不依赖AS,使用系统Terminal执行,执行命令之前,需要先cd到RN源码根目录
1.启动RN相关服务
$ react-native start
(react-native start和npm start都可以开启服务,具体有啥区别还没搞明白,有了解的还望赐教)
2.运行程序
$ react-native run-android
如果顺利,这时候程序就启动了,成功启动结果如下:
(五)那些年踩过的坑
在编写React Native的时候,遇到了各种各样的问题,当时记录了一些问题,可查看源码下readme.md中问题记录部分
由于对RN不是很了解,demo中某些实现方法不是很合理(例如获取扫描结果部分),如果要在实际项目中使用,有些地方还需优化,文中或源码中如果有错误还望指出。
源码较大,已上传至本人github:
https://github.com/lucher/EasyPR_Android_RN
想先体验效果的可以下载apk文件:
http://download.csdn.net/detail/lucherr/9841978
打赏作者:
- React Native调用Android原生代码实现车牌识别功能【附效果图附源码】
- React Native 调用原生Android/iOS代码实现拨号功能
- Android Gallery实现3D相册(附效果图+Demo源码)
- Android Gallery实现3D相册(附效果图+Demo源码)
- Android Gallery实现3D相册(附效果图+Demo源码)
- Android Gallery实现3D相册(附效果图+Demo源码)
- 基于WebSocket实现的Android和H5聊天通讯实例【附效果图附所有源码】
- 倒计时代码-附效果图
- js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
- [微信小程序]真正实现聊天对话(文本,图片)的功能(完整代码附效果图)
- Android 使用Gallery实现3D相册(附效果图+Demo源码)
- React Native调用Android原生模块
- React Native调用Android原生组件
- React native 调用Android原生模块
- react-native调用Android原生模块
- react native js调用android原生activity
- react-native调用Android的原生方法
- Android拍照+方形剪裁——附代码与效果图
- C#多线程Lock
- 对于JdbcTemplate#queryForObject()的使用
- 动态规划——357. Count Numbers with Unique Digits[medium]
- 变形实例2
- 行级元素变为块级元素
- React Native调用Android原生代码实现车牌识别功能【附效果图附源码】
- MySQL数据库编码设置
- 红帽系统数据库mariadb的简单使用
- 深入理解Java常用类----String
- java泛型(一)、泛型的基本介绍和使用
- 对数据结构一点一小小的理解(五)——栈
- flex的居中显示
- Rider新预览版对F#的支持让人眼前一亮
- Hdu 2052 Picture