react-native-barcode
A smart barcode scanner component for React Native app. The library uses https://github.com/zxing/zxing to decode the barcodes for android, and also supports ios.
Preview
Installation
npm install https://github.com/zhou-ting/react-native-barcode.git --save
IOS端集成:
1.将\node_modules\react-native-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-barcode\ios\raw 文件夹拖到到Xcode项目中(确保文件夹是蓝色的)
5.在info.plist添加相机权限 Privacy - Camera Usage Description:
android端集成:
- 在
android/settings.gradle
文件中:
...
include ':react-native-barcode'
project(':react-native-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-barcode/android')
- 在
android/app/build.gradle
文件中:
...
dependencies {
...
// 在这里添加
compile project(':react-native-barcode')
}
- 在MainApplication.java文件中:
...
import com.reactnativecomponent.barcode.RCTCapturePackage; //这是要添加的
//将原来的代码注释掉,换成这句
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
// private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...........
@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;
}
...
- 在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"/>
...
使用
;; let width: deviceWidth = Dimensions; type Props = {};<Props> //构造方法 { superprops; thisstate = viewAppear: false ; } { //启动定时器 thistimer = ; } //组件销毁生命周期 { //清楚定时器 thistimer && ; } { // console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`) this; Alert }; { this_barCode }; { this_barCode } { this_barCode } { this_barCode } { return <View style=flex: 1> thisstateviewAppear ? <Barcode style=flex: 1 ref= this_barCode = component onBarCodeRead=this_onBarCodeRead/> : null <TouchableOpacity style=stylesinputBtn onPress=this_openFlash> <Text style=stylesinputBtnText>打开闪光灯</Text> </TouchableOpacity> <TouchableOpacity style=stylesinputBtn top: 150 onPress=this_closeFlash> <Text style=stylesinputBtnText>关闭闪光灯</Text> </TouchableOpacity> </View> ; } const styles = StyleSheet;
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
barCodeTypes | array | Yes | determines the supported barcodeTypes | |
scannerRectWidth | number | Yes | 255 | determines the width of scannerRect |
scannerRectHeight | number | Yes | 255 | determines the height of scannerRect |
scannerRectTop | number | Yes | 0 | determines the top shift of scannerRect |
scannerRectLeft | number | Yes | 0 | determines the left shift of scannerRect |
scannerLineInterval | number | Yes | 3000 | determines the interval of scannerLine's movement |
scannerRectCornerColor | string | Yes | #09BB0D |
determines the color of scannerRectCorner |