最近在制作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
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"/> ...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 來源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。