React Native 二维码扫描组件

时间：2022-03-29 00:12:15

学rn得朋友们，你们知道rn开源项目吗？来吧看这里：http://www.marno.cn/(rn开源项目)

React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现post请求) + （倒计时验证码）+(父子组件通信)+(asyncStorage异步存储) +（TextInput文本输入框）:http://www.jianshu.com/p/7c81e122276b

ReactNative学习笔记七之图表组件交互（上）:http://www.jianshu.com/p/b103a83d7840

React Native之ListView实现九宫格效果:http://blog.csdn.net/xiangzhihong8/article/details/53572824

1.前言

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

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

2.特性

  • 兼容 RN0.4.0+ 的版本
  • 兼容 Android 和 iOS 平台
  • 支持二维码、条形码扫描
  • 轻松实现各种扫描界面

3.截图预览

React Native 二维码扫描组件

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:,padding:}}

            >这里添加标题</Text>

        );

    }

    _renderMenu() {

        return (

            <Text

                style={{color:'white',textAlignVertical:'center', textAlign:'center',font:,padding:}}

            >这里添加底部菜单</Text>

        )

    }

    barcodeReceived(e) {

        Toast.show('Type: ' + e.type + '\nData: ' + e.data);

        //console.log(e)

    }

}

6.属性列表

React Native 二维码扫描组件

属性名 类型 默认值 可选 描述
maskColor string 0000004D true 遮罩颜色
borderColor string 000000 true 边框颜色
cornerColor string 000000 true 转角颜色
borderWidth number 0 true 边框宽度
cornerBorderWidth number 4 true 转角宽度
cornerBorderLength number 20 true 转角长度
rectHeight number 200 true 扫描狂高度
rectWidth number 200 true 扫描狂宽度
isCornerOffset bool false true 转角是否偏移
cornerOffsetSize number 0 true 转角偏移量
bottomMenuHeight number 0 true 底部操作菜单高度
scanBarAnimateTime number 2500 true 扫描线移动速度
scanBarColor string 22ff00 true 扫描线颜色
scanBarImage any null true 使用图片扫描线
scanBarHeight number 1.5 true 扫描线高度
scanBarMargin number 6 true 扫描线距扫描狂边距
hintText string 将二维码/条码放入框内，即可自动扫描 true 提示文本
hintTextStyle object { color: ‘#fff’, fontSize: 14,backgroundColor:’transparent’} true 提示文字样式
hintTextPosition number 130 true 提示文字位置
isShowScanBar bool true true 是否显示扫描条
bottomMenuStyle object - true 底部菜单样式
renderTopBarView func - flase 绘制顶部操作条组件
renderBottomMenuView func - false 绘制底部操作条组件
onScanResultReceived func - false

7.实现简述

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

React Native 二维码扫描组件

组件代码结构如下，基本是通过使用绝对定位的 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 仓库的更新。

 

相关文章