A highly customized qrcode viewfinder base on react-native-camera. You must set up react-native-camera correctly first before use it.If you need to set more react-native-camera props, you can just use Viewfinder which is exported as QRScannerRectView. Please view source code to learn more.
- Pure JS code
- Support Android and iOS
- Support React Native 0.60+
- Support scan QR code, Bar code
- Scanning interface can be customized
| Default | MeiTuan | |
|---|---|---|
 |
 |
 |
| TikTok | DemoHome | Demo Gif |
 |
 |
 |
// First
set up react-native-camera
// Second
yarn add react-native-qrcode-scanner-view
// or
npm install react-native-qrcode-scanner-view --saveimport { View } from 'react-native';
import { QRScannerView } from 'react-native-qrcode-scanner-view';
export default class DefaultScreen extends Component {
renderTitleBar = () => <Text style={{color:'white',textAlign:'center',padding:16}}>Title</Text>
renderMenu = () => <Text style={{color:'white',textAlign:'center',padding:16}}>Menu</Text>
barcodeReceived = (event) => { console.log('Type: ' + event.type + '\nData: ' + event.data) };
render() {
return (
<View style={{flex:1}}>
< QRScannerView
onScanResult={ this.barcodeReceived }
renderHeaderView={ this.renderTitleBar }
renderFooterView={ this.renderMenu }
scanBarAnimateReverse={ true }/>
</View>
)
}
}
| Prop | Type | Default | Optional |
|---|---|---|---|
| maskColor | string | #0000004D | true |
| rectStyle | object | height: 300, width: 300, borderWidth: 0, borderColor: '#000000', marginBottom: 0 |
true |
| cornerStyle | object | height: 32, width: 32, borderWidth: 6, borderColor: '#1A6DD5' |
true |
| cornerOffsetSize | number | 0 | true |
| isShowCorner | bool | true | true |
| scanBarStyle | object | marginHorizontal: 8, borderRadius: 2, backgroundColor: '#1A6DD5' |
true |
| isShowScanBar | bool | true | true |
| scanBarAnimateTime | number | 3000 | true |
| scanBarAnimateReverse | bool | false | true |
| scanBarImage | any | true | |
| hintText | string | true | |
| hintTextStyle | object | color: '#fff', fontSize: 14, backgroundColor: 'transparent', marginTop: 32 |
true |
| renderHeaderView | func | - | true |
| renderFooterView | func | - | true |
| onScanResult | func | - | false |
| scanInterval | number | 2000 | true |
| torchOn | bool | false | true |
| userFront | bool | false | true |
- 公众号: Marno
- 网站: www.marno.cn
- 掘金: www.juejin.im/user/marno