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端集成：

1. 在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')}

1. 在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类型可选的默认描述barCodeTypesarrayYes 支持的条码类型scannerRectWidthnumberYes255扫描区域的宽度scannerRectHeightnumberYes255扫描区域的高度scannerRectTopnumberYes0扫描区域下移scannerRectLeftnumberYes0扫描区域左移scannerLineIntervalnumberYes3000扫描线移动的频率scannerRectCornerColorstringYes#09BB0D边线的颜色

这里是我做的app截图（这里是识别出来了条码的，只是在我们后台查不到，才给这样的提示，直接忽略前面的字）

作者：你的男孩_阿强
链接：http://www.jianshu.com/p/8bef243bc35d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。