react-native-smart-barcode目前最好用的二維碼掃描元件(IOS、android)
最近在製作React-Native專案的時候,條碼識別給我們整個專案帶了不少麻煩,幾款主流的條碼識別元件都不是特別好用,使用者體驗比較差,比如二維碼識別速度慢、掃描頁面十分卡頓用等一系列問題,後來在網上無意間找到一個非常好用的二維碼掃描元件——react-native-smart-barcode,這個元件是基於https://github.com/zxing/zxing這個庫寫的,同時也支援IOS,二維碼識別速度十分快、同時介面流暢,但是官方整合教程有部分有需要修改的地方,所以發這篇文章糾正一下怎麼加成IOS和android端的步驟(如有問題,歡迎大家糾正)。
安裝:
npm install react-native-smart-barcode --save
npm install react-native-smart-timer-enhance --save
android端整合:
- 在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')
}
- 在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截圖(這裡是識別出來了條碼的,只是在我們後臺查不到,才給這樣的提示,直接忽略前面的字)