0.6.1 • Published 7 years ago
1.Guide
2.Features
- Can scan QR code,Bar code
- Support Android and iOS
- Base on react-native-camera
- Scanning interface can be customized
3.ScreenShots
Twitter | WeChat | OFO |
---|
| | |
QQBrowser | Gif1 | Gif2 |
| | | |
4.Installation
// first step
npm install ac-qrcode-scanner-rn --save
// second step
react-native link
5.Basic Usage
import { QRScannerView } from 'ac-qrcode-scanner-rn';
export default class QQBrowserScreen extends Component {
render() {
return (
< QRScannerView
onScanResultReceived={this.barcodeReceived.bind(this)}
renderTopBarView={() => {
return (
<View>
<Text}>这顶部标题栏</Text>
</View>
)
}}
renderBottomMenuView={() => {
return (
<View>
<Text>相册</Text>
</View>
)
}}
/>
)
}
barcodeReceived(e) {
console.log(e)
}
}
6.Props
Prop | Type | Default | Optional | Description |
---|
maskColor | string | #0000004D | - | - |
borderColor | string | #000000 | - | - |
cornerColor | string | #000000 | - | - |
borderWidth | number | 0 | - | - |
cornerBorderWidth | number | 4 | - | - |
cornerBorderLength | number | 20 | - | - |
rectHeight | number | 200 | | |
rectWidth | number | 200 | | |
isCornerOffset | bool | false | | |
cornerOffsetSize | number | 0 | | |
bottomMenuHeight | number | 100 | | |
scanBarAnimateTime | number | 2500 | | |
scanBarColor | string | #22ff00 | | |
scanBarImage | any | null | | |
scanBarHeight | number | 1.5 | | |
scanBarMargin | number | 6 | | |
hintText | string | 将二维码/条码放入框内,即可自动扫描 | - | - |
hintTextStyle | object | {color: '#fff', fontSize: 14} | - | - |
hintTextPosition | number | 130 | - | - |
renderTopBarView | func | - | - | - |
renderBottomMenuView | func | - | - | - |
isShowScanBar | bool | true | - | - |
bottomMenuStyle | object | - | - | - |
6.To Do
8.Thanks
9.About Me