React-Native中二维码扫描使用

1、简介

使用的是AC-QRCode-RN，github地址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、属性列表

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>

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