react-native-qrcode-scanner-view
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.
Guide
Features
- Pure JS code
- Support Android and iOS
- Support React Native 0.60+
- Support scan QR code, Bar code
- Scanning interface can be customized
ScreenShots, Default, WeChat, MeiTuan, :----------:, :--------:, :-----------:, 
, 
, 
, TikTok, DemoHome, Demo Gif, 
, 
, 
, ## Installation
// First
set up react-native-camera
// Second
yarn add react-native-qrcode-scanner-view
// or
npm install react-native-qrcode-scanner-view --save
Basic
import { 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>
)
}
}
Props
, 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, 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, ## About
- 公众号: Marno
- 网站: www.marno.cn
- 掘金: www.juejin.im/user/marno