react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
来源:互联网 发布:中国顺差逆差数据 编辑:程序博客网 时间:2024/06/06 02:50
最近在制作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)
属性
这里是我做的app截图(这里是识别出来了条码的,只是在我们后台查不到,才给这样的提示,直接忽略前面的字)
作者:你的男孩_阿强
链接:http://www.jianshu.com/p/8bef243bc35d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
- react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
- React Native WebView组件实现的BarCode(条形码)、(QRCode)二维码
- React Native 二维码扫描组件(简单,易用!)
- 自定义 React Native 二维码扫描组件
- React Native 二维码扫描ios(原生交互)
- React Native 二维码扫描 react-native-camera的使用
- 自定义 React Native 二维码扫描组件(简单,易用!)
- 自定义 React Native 二维码扫描组件(简单,易用!)
- 自定义 React Native 二维码扫描组件(简单,易用!)
- React Native之二维码扫描
- React Native 实现二维码扫描
- React Native 实现二维码扫描
- React Native之二维码扫描
- 【React Native 实战】二维码扫描
- React Native实现二维码扫描
- react-native打开摄像机、ios端二维码扫描
- react-native打开摄像机、ios端二维码扫描
- Android中kotlin的学习(anko + kotlin)
- React Native获取地理位置(获取具体城市、经纬度)
- android 百分比布局
- 结构体定义:struct与typedef struct 用法详解和用法小结
- 博客搬家
- react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
- VMware提示该虚拟机似乎正在使用如何解决
- React Native 常用的技术
- 99%的人都理解错了HTTP中GET与POST的区别
- VS中CDC类TextOut()参数不匹配问题
- React Native Android打包apk
- BZOJ1934: [Shoi2007]Vote 善意的投票
- 扩增子分析还聚OTU就真OUT了,试试unoise3
- HttpClient_Post请求