0.6.1 • Published 9 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