1.0.3 • Published 8 years ago
gc-qrcode-bl v1.0.3
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
| OFO | ||
|---|---|---|
![]() | ![]() | ![]() |
| QQBrowser | Gif1 | Gif2 |
![]() | ![]() | ![]() |
4.Installation
// first step
npm install ac-qrcode --save
// second step
react-native link5.Basic Usage
import { QRScannerView } from 'ac-qrcode';
export default class DefaultScreen extends Component {
render() {
return (
< QRScannerView
onScanResultReceived={this.barcodeReceived.bind(this)}
renderTopBarView={() => this._renderTitleBar()}
renderBottomMenuView={() => this._renderMenu()}
/>
)
}
_renderTitleBar(){
return(
<Text
style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}
>Here is title bar</Text>
);
}
_renderMenu() {
return (
<Text
style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}
>Here is bottom menu</Text>
)
}
barcodeReceived(e) {
Toast.show('Type: ' + e.type + '\nData: ' + e.data);
//console.log(e)
}
}6.Props

| Prop | Type | Default | Optional | Description |
|---|---|---|---|---|
| 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 | |
| torchMode | string | null | true | Indicate the torch mode, "on" or "off" |
7.To Do
- Generate qr code
- Control flashlight
8.Thanks
9.About Me
- 公众号:aMarno
- 网站:www.marno.cn
- 掘金:www.juejin.im/user/marno
- 简书:www.jianshu.com/u/marno
- 专题:《React Native 开发阵营》
1.0.3
8 years ago





