最完善,快速的 react-native 二維碼掃描

react-native 二維碼掃描
先看效果

使用的開源庫

react-native-smart-barcode react-native-smart-timer-enhancejava

安裝
npm install react-native-smart-barcode --save
    npm install react-native-smart-timer-enhance --save
複製代碼

IOS配置node

1.將\node_modules\react-native-smart-barcode\ios\RCTBarcode\RCTBarCode.xcodeproj 添加到Xcode項目中,以下圖: react

2.添加依賴,Build Phases->Link Binary With Libraries 加入RCTBarCode.xcodeproj\Products\libRCTBarCode.a(直接拖),以下圖: android

3.肯定一下Build Settings->Seach Paths->Header Search Paths是否有$(SRCROOT)/../../../react-native/React 如果沒有就添加 而且設爲recursive ios

4.將\node_modules\react-native-smart-barcode\ios\raw 文件夾拖到到Xcode項目中(確保文件夾是藍色的),以下圖: git

5.在info.plist添加相機權限 Privacy - Camera Usage Description: github

react-native 代碼npm

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() {

        this.setState({
            viewAppear: true,
        })
        // 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)
複製代碼

附原文react-native



android 配置

1 在android/settings.gradle文件中:xcode

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文件中(這裏官方上面有錯誤,在這裏修改一下):

...
//將原來的代碼註釋掉,換成這句
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"/>
複製代碼

可能會遇到的問題

image.png
這是由於react-Native 0.48後被移除了 PropTypes 因此在項目上從新導入PropTypes 導入方式是 import PropTypes from 'prop-types'; 圖示以下
image.png

參考

做者:你的男孩_阿強 連接:http://cdn2.jianshu.io/p/8bef243bc35d

源碼地址

連接 https://github.com/yxwandroid/rnMydemo

關注公衆號獲取更多內容

相關文章
相關標籤/搜索