React Native实现二维码扫描

基于react-native-camera

依赖包导入步骤

详细步骤可看github上的说明,简要记录如下:
1. npm install react-native-camera –save
2. react-native link react-native-camera

android手动link方式:
1. android/settings.gradle加入:
include ‘:react-native-camera’
project(‘:react-native-camera’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-camera/android’)
2. android/app/build.gradle加入:
compile project(‘:react-native-camera’)
3. getPackages()方法中加入new RCTCameraPackage()

使用方法

直接使用Camera作为容器

 <Camera style={styles.container}
         onBarCodeRead={this.onBarCodeRead}
      >              
       {this.renderOtherView()}
       ...
  </Camera>

返回二维码扫描结果

onBarCodeRead(data) {
        //将返回的结果转为对象
        var result = JSON.parse(data.data);
        console.log(result);
    }

二维码扫描框

 this.state = {
           animatedValue: new Animated.Value(0),
        };

 componentDidMount() {
        this.scannerLineMove();
    }

//扫描框
 renderQrScanView() {
        const animatedStyle = {
            transform: [
                {translateY: this.state.animatedValue}
            ]
        };
        return (
            <View style={styles.container}>            
                <View style={styles.middleView}>
                    //下面四个view为扫描框的四个角
                    <View style={[styles.topLeftCorner, {
                        borderLeftWidth: 2,
                        borderTopWidth: 2,
                    }]}/>
                    <View style={[styles.topRightCorner, {
                        borderRightWidth: 2,
                        borderTopWidth: 2,
                    }]}/>
                    <View style={[styles.bottomLeftCorner, {
                        borderLeftWidth: 2,
                        borderBottomWidth: 2,
                    }]}/>
                    <View style={[styles.bottomRightCorner, {
                        borderRightWidth: 2,
                        borderBottomWidth: 2,
                    }]}/>
                    //扫描条
                    <Animated.View
                        style={[animatedStyle, {alignItems: 'center'}]}>
                        <View style={[{
                            backgroundColor: '#5E8EF8',
                            height: WindowUtil.pxToDp(6),
                            width: WindowUtil.pxToDp(590) - 4,
                        }]}/>
                    </Animated.View>
                </View>
                <View style={styles.middleRightView}/>
            </View>
        )
    }


   /**
     * 扫描条动画
     */
    scannerLineMove() {
        this.state.animatedValue.setValue(0);  //重置Rotate动画值为0
        Animated.timing(this.state.animatedValue, {
            toValue: WindowUtil.pxToDp(middleViewHeight),
            duration: 2000,
            easing: Easing.linear
        }).start(() => this.scannerLineMove());
    }

//部分style如下:
topLeftCorner: {
        borderColor: 'white',
        width: WindowUtil.pxToDp(100),
        height: WindowUtil.pxToDp(100),
        position: 'absolute',
        top: 0,
        left: 0,
    },

    topRightCorner: {
        borderColor: 'white',
        width: WindowUtil.pxToDp(100),
        height: WindowUtil.pxToDp(100),
        position: 'absolute',
        top: 0,
        right: 0,
    },

    bottomLeftCorner: {
        borderColor: 'white',
        width: WindowUtil.pxToDp(100),
        height: WindowUtil.pxToDp(100),
        position: 'absolute',
        bottom: 0,
        left: 0,
    },

    bottomRightCorner: {
        borderColor: 'white',
        width: WindowUtil.pxToDp(100),
        height: WindowUtil.pxToDp(100),
        position: 'absolute',
        bottom: 0,
        right: 0,
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值