react-native-smart-barcode（react-native二维码扫描）

我看了好多人的react-native-smart-barcode多多少少有些问题，踩了好多坑搞定了。

npm install react-native-smart-barcode --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')
}

3. 在MainApplication.java文件中（官方上面的问题错误，修改如下）：

...
import com.reactnativecomponent.barcode.RCTCapturePackage;    //这是要添加的

//将原来的代码注释掉，换成这句
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    //  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
   ...........
    @Override
    protected List getPackages() {
      return Arrays.asList(
              new MainReactPackage(),
              //添加以下代码
              new RCTCapturePackage()
      );
    }
  };
  //添加以下代码
  public void setReactNativeHost(ReactNativeHost reactNativeHost) {
    mReactNativeHost = reactNativeHost;
  }
 
  @Override
   public ReactNativeHost getReactNativeHost() {
     return mReactNativeHost;
   }
...

4.在AndroidManifest.xml文件中添加相机权限:

...




...

IOS端集成：

1.将\node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode的Libraries中

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项目中（确保文件夹是蓝色的）

image.png

5.在info.plist添加相机权限 Privacy - Camera Usage Description：

image

看了好多代码有问题，这是我的代码（亲测有效）:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    Alert
} from 'react-native';
import Barcode from 'react-native-smart-barcode'

type Props = {};
export default class App extends Component {
    //构造方法
    constructor(props) {
        super(props);
        this.state = {
            viewAppear: false,
        };
    }
    componentDidMount() {
        //启动定时器
        this.timer = setTimeout(
            () => this.setState({viewAppear: true}),
            250
        );
    }
    //组件销毁生命周期
    componentWillUnmount() {
        //清楚定时器
        this.timer && clearTimeout(this.timer);
    }

    _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.code, [
            {text: '确认', onPress: () => this._startScan()},
        ])
    };

    _startScan = (e) => {
        this._barCode.startScan()
    };

    _stopScan = (e) => {
        this._barCode.stopScan()
    }
    render() {
        return (
            
                {this.state.viewAppear ?
                     this._barCode = component}
                             onBarCodeRead={this._onBarCodeRead}/>
                    : null
                }
            
        )
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

属性

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	边线的颜色

效果图

image.png

配置时出现的bug，给大家梳理下

1.

image.png

2.

image.png

这个很常见其实，解决办法

npm install prop-types --save

然后修改一下文件

image.png

3.No resource found that matches the given name: attr 'android:keyboardNavigationCluster'
修改成如下参数：

image.png

亲测没有问题，觉得有用的小伙伴点个小红心就行，么么哒。

友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！