React-Native中二维码扫描使用

灰太狼 2022-06-11 05:56 191阅读 0赞

# 1、简介 #

使用的是AC-QRCode-RN，github地址[https://github.com/MarnoDev/AC-QRCode-RN/blob/master/README\_CN.md][https_github.com_MarnoDev_AC-QRCode-RN_blob_master_README_CN.md]  
通过 react-native-camera 这个库实现使用摄像头实时扫描二维码进行解析的功能。

# 2、特性 #

*  支持扫描二维码、条形码
 *  支持 Android 和 iOS 系统
 *  基于 react-native-camera
 *  轻松实现各类扫描界面

# 3、安装 #

首先  
npm install ac-qrcode –save  
其次  
npm install react-native-camera –save  
react-native link 需要 link 后才能使用  
PS：如果 link 没有成功，会报错。如果没有自动 link，可以手动 link

# 4、基本使用 #

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}}
                >这里添加标题</Text>
            );
        }
    
        _renderMenu() {
            return (
                <Text
                    style={
       {color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}
                >这里添加底部菜单</Text>
            )
        }
    
        barcodeReceived(e) {
            Toast.show('Type: ' + e.type + '\nData: ' + e.data);
            //console.log(e)
        }
    }

# 5、属性列表 #

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

# 6、使用出现问题 #

*  返回按钮点击无反应  
    原因：renderBottomMenuView上标题图层将返回按钮图层遮挡，使点击返回按钮事件不能触发；  
    解决方法：

<View style={
       {flex: 1}}>
                    <Camera
                        onBarCodeRead={this.props.onScanResultReceived}
                        style={
       {flex: 1}}
                    >
                        {
       /*绘制顶部标题栏组件*/}
                        {this.props.renderTopBarView()}
    
                        {
       /*绘制扫描遮罩*/}
                        <QRScannerRectView
                            maskColor={this.props.maskColor}
                            cornerColor={this.props.cornerColor}
                            borderColor={this.props.borderColor}
                            rectHeight={this.props.rectHeight}
                            rectWidth={this.props.rectWidth}
                            borderWidth={this.props.borderWidth}
                            cornerBorderWidth={this.props.cornerBorderWidth}
                            cornerBorderLength={this.props.cornerBorderLength}
                            isLoading={this.props.isLoading}
                            cornerOffsetSize={this.props.cornerOffsetSize}
                            isCornerOffset={this.props.isCornerOffset}
                            bottomMenuHeight={this.props.bottomMenuHeight}
                            scanBarAnimateTime={this.props.scanBarAnimateTime}
                            scanBarColor={this.props.scanBarColor}
                            scanBarHeight={this.props.scanBarHeight}
                            scanBarMargin={this.props.scanBarMargin}
                            hintText={this.props.hintText}
                            hintTextStyle={this.props.hintTextStyle}
                            scanBarImage={this.props.scanBarImage}
                            hintTextPosition={this.props.hintTextPosition}
                            isShowScanBar={this.props.isShowScanBar}
                        />
    
                        {
       /*绘制底部操作栏*/}
                        <View style={[styles.buttonsContainer, this.props.bottomMenuStyle]}>
                            {this.props.renderBottomMenuView()}
                        </View>
    
                    </Camera>
                </View>

将绘制顶部标题组件下移到绘制扫描遮罩下方即可。

[https_github.com_MarnoDev_AC-QRCode-RN_blob_master_README_CN.md]: https://github.com/MarnoDev/AC-QRCode-RN/blob/master/README_CN.md
[SouthEast]: /images/20220611/83685db905604a229b4651ea01448ba2.png
[SouthEast 1]: /images/20220611/8a89104e2e894867a23feae8253e6309.png