你需要的 React Native 二维码扫描组件(简单，易用！)

1前言

最近用 React Native 仿写了一下 ofo 应用，涉及到了二维码扫描的功能，在 github 上搜了一下，也没发现一个趁手的二维码扫描组件，所以干脆自己动手写了一个。

其中使用摄像头实时扫描二维码进行解析的功能，已经通过 react-native-camera 这个库实现了，所以我也只是写了一个可以自定义样式的扫描界面，为了使用方便，我已经将其封装成组件，上传到了 NPM 服务器，下面就大概说一下实现过程以及使用方法。

2特性

• 兼容 RN0.4.0+ 的版本

• 兼容 Android 和 iOS 平台

• 支持二维码、条形码扫描

• 轻松实现各种扫描界面

3截图预览

Twitter

WeChat

QQBrowser

ofo

4安装

//第一步
npm install ac-qrcode --save
//第二步（react-native-camera 需要 link 后才能使用）
react-native link
PS：如果 link 没有成功，会报错。如果没有自动 link，可以手动 link

5基本使用

 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);
    }
}

6基本属性

8实现简述

扫描界面可以分为 4 个部分：顶部标题栏，底部操作栏，遮罩层，扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。

组件代码结构如下，基本是通过使用绝对定位的 View 实现的布局

<View>
    <Camera>
        {/*顶部标题栏*/}
        <TopBarView />

        <View>
            {/*扫描框部分*/}
            <View>
                {/*扫描框边线*/}
                <View>
                    {/*扫描条及动画*/}
                    <Animated.View />
                </View>

                {/*扫描框转角-左上*/}
                <View />
                {/*扫描框转角-右上*/}
                <View />
                {/*扫描框转角-左下*/}
                <View />
                {/*扫描框转角-右下*/}
                <View />
            </View>

            {/*遮罩-上*/}
            <View />
            {/*遮罩-左*/}
            <View />
            {/*遮罩-右*/}
            <View />
            {/*遮罩-下*/}
            <View />

            {/*提示文字*/}
            <HintTextView />
        </View>

        {/*底部操作栏*/}
        <BottomMenuView />
    </Camera>
</View>

详细代码比较长，就不一一列出来解释了。主要也比较简单，感觉没啥好说的，就是通过计算组件在屏幕上的坐标位置，进行对应的大小设置而已。感兴趣的可以直接跳转到 github 去看，地址在这里：https://github.com/MarnoDev/AC-QRCode-RN

顺便提醒一下，因为目前还没有进行优化，所以打开扫码界面的速度感觉会有一些慢，后面有时间会对这些细节进行优化的，具体可以关注我的公众号获取，或者留意下后面我在 github 仓库的更新。

获取更过 RN 干货，欢迎关注公众号 aMarno 

也欢迎加入 RN 群交流

原文来自:Marno

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com