工程目录下运行 npm install --save react-native-android-barcodescanner 或者 yarn add react-native-android-barcodescanner(已经安装了yarn)
version 0.1.1适用于大于等于rn0.44和小于0.47
version 0.1.5适用于rn0.47及以上
加入<uses-permission android:name="android.permission.CAMERA" />权限
运行 react-native link react-native-android-barcodescanner
在工程中导入:
import ZbarScannerView from 'react-native-android-barcodescanner';
<ZbarScannerView
style={{flex:1}}
onScanResultReceived={(data)=>{ToastAndroid.show(JSON.stringify(data),ToastAndroid.SHORT)}}
hintText={''}
renderTopBarView={() => <View></View>}
renderBottomMenuView={() => <View></View>}
/>
<br/>| Prop | Type | Default | Optional |
|---|---|---|---|
| maskColor | string | #0000004D | true |
| borderColor | string | #000000 | true |
| cornerColor | string | #000000 | true |
| borderWidth | number | 0 | true |
| cornerBorderWidth | number | 4 | true |
| cornerBorderLength | number | 20 | true |
| rectHeight | number | 200 | true |
| rectWidth | number | 200 | true |
| isCornerOffset | bool | false | true |
| cornerOffsetSize | number | 0 | true |
| bottomMenuHeight | number | 0 | true |
| scanBarAnimateTime | number | 2500 | true |
| scanBarColor | string | #22ff00 | true |
| scanBarImage | any | null | true |
| scanBarHeight | number | 1.5 | true |
| scanBarMargin | number | 6 | true |
| hintText | string | 将二维码/条码放入框内, 即可自动扫描 |
true |
| hintTextStyle | object | { color: '#fff', fontSize: 14, backgroundColor:'transparent'} |
true |
| hintTextPosition | number | 130 | true |
| isShowScanBar | bool | true | true |
| bottomMenuStyle | object | - | true |
| renderTopBarView | func | - | flase |
| renderBottomMenuView | func | - | false |
| onScanResultReceived | func | - | false |
