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	类型	可选的	默认	描述
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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。