react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
最近在制作React-Native项目的时候,条码识别给我们整个项目带了不少麻烦,几款主流的条码识别组件都不是特别好用,用户体验比较差,比如二维码识别速度慢、扫描页面十分卡顿用等一系列问题,后来在网上无意间找到一个非常好用的二维码扫描组件——react-native-smart-barcode,这个组件是基于https://github.com/zxing/zxing这个库写的,同时也支持IOS,二维码识别速度十分快、同时界面流畅,但是官方集成教程有部分有需要修改的地方,所以发这篇文章纠正一下怎么加成IOS和android端的步骤(如有问题,欢迎大家纠正)。
react-native-smart-barcode github地址
安装:
npm install react-native-smart-barcode --save
npm install react-native-smart-timer-enhance --save
android端集成:
- 在android/settings.gradle文件中:
...
include ':react-native-smart-barcode'
project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android')
2.在android/app/build.gradle文件中:
...
dependencies {
...
// 在这里添加
compile project(':react-native-smart-barcode')
}
- 在MainApplication.java文件中(这里官方上面有错误,在这里修改一下):
...
//将原来的代码注释掉,换成这句
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
// private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
//直接在这里添加
new RCTCapturePackage()
);
}
};
//添加
public void setReactNativeHost(ReactNativeHost reactNativeHost) {
mReactNativeHost = reactNativeHost;
}
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
...
4.在AndroidManifest.xml文件中添加相机权限:
...
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
...
IOS端集成:
1.将\node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode项目中,如下图:
2.添加依赖,Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a(直接拖),如下图:
3.确定一下Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React并设为recursive
4.将\node_modules\react-native-smart-barcode\ios\raw 文件夹拖到到Xcode项目中(确保文件夹是蓝色的),如下图:
5.在info.plist添加相机权限 Privacy - Camera Usage Description:
如何使用(这里贴一下作者的代码):
import React, {
Component,
} from 'react'
import {
View,
StyleSheet,
Alert,
} from 'react-native'
import Barcode from 'react-native-smart-barcode'
import TimerEnhance from 'react-native-smart-timer-enhance'
class BarcodeTest extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
viewAppear: false,
};
}
render() {
return (
<View style={{flex: 1, backgroundColor: 'black',}}>
{this.state.viewAppear ? <Barcode style={{flex: 1, }}
ref={ component => this._barCode = component }
onBarCodeRead={this._onBarCodeRead}/> : null}
</View>
)
}
componentDidMount() {
let viewAppearCallBack = (event) => {
this.setTimeout( () => {
this.setState({
viewAppear: true,
})
}, 255)
}
this._listeners = [
this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
]
}
componentWillUnmount () {
this._listeners && this._listeners.forEach(listener => listener.remove());
}
_onBarCodeRead = (e) => {
console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
this._stopScan()
Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
{text: 'OK', onPress: () => this._startScan()},
])
}
_startScan = (e) => {
this._barCode.startScan()
}
_stopScan = (e) => {
this._barCode.stopScan()
}
}
export default TimerEnhance(BarcodeTest)
属性
Prop | 类型 | 可选的 | 默认 | 描述 |
---|---|---|---|---|
barCodeTypes | array | Yes | 支持的条码类型 | |
scannerRectWidth | number | Yes | 255 | 扫描区域的宽度 |
scannerRectHeight | number | Yes | 255 | 扫描区域的高度 |
scannerRectTop | number | Yes | 0 | 扫描区域下移 |
scannerRectLeft | number | Yes | 0 | 扫描区域左移 |
scannerLineInterval | number | Yes | 3000 | 扫描线移动的频率 |
scannerRectCornerColor | string | Yes | #09BB0D | 边线的颜色 |
这里是我做的app截图(这里是识别出来了条码的,只是在我们后台查不到,才给这样的提示,直接忽略前面的字)
作者:你的男孩_阿强
链接:http://www.jianshu.com/p/8bef243bc35d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- ASP.NET MVC Filters 4种默认过滤器的使用【附示例】 数据库常见死锁原因及处理 .NET源码中的链表 多线程下C#如何保证线程安全? .net实现支付宝在线支付 彻头彻尾理解单例模式与多线程 App.Config详解及读写操作 判断客户端是iOS还是Android,判断是不是在微信浏览器打开
- Flutter通过MethodChannel实现Flutter 与Android iOS 的双向通信
- Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信
- Android,iOS打开手机QQ与指定用户聊天界面
- Android 基于NumberPicker自定义弹出窗口Dialog整合日期选择器
- Android开发之自定义控件-组合控件的开发与实现
- App测试中ios和Android有哪些区别呢?
- 腾讯Android自动化测试实战第3章
- Android Studio 引入 so 文件
- 《Android游戏开发详解》一2.7 构建一个简单的计数程序
- 《Android安全技术揭秘与防范》——第1章,第1.3节Android和iOS系统对比
- 《HTML5移动应用开发入门经典》—— 1.5 在iOS和Android设备中使用HTML5
- 《Android平板电脑开发秘籍》——3.10节小结
- Android中Bitmap,byte[],Drawable相互转化
- Android L动画入门
- Android自定义长按事件
- android不自动弹出虚拟键盘
- Python全新Flet框架或将打通iOS、Android、Macos和Windows多平台开发(Flet教程含3个完成项目源码)
- 通过android studio上传项目到github
- Delphi xe7 FireMonkey / Mobile (Android, iOS)生成 QR Code完整实例
- Android平台、iOS平台设置UrlSchemes,实现被第三方应用调用
- Android 设置wifi共享电脑服务器资源
- iOS及Android自动化实践
- 更改Android AVD模拟器创建路径位置的方法
- 用acharengine作Android图表
- 安卓开发学习笔记(二):如何用Android Stuidio在res资源下创建xml视图文件