React Native 二维码扫描 react-native-camera的使用

来源：互联网发布：严歌苓知乎编辑：程序博客网时间：2024/04/30 22:24

最近写项目用到了二维码扫描，就去找了下，发现有个第三方的react-native-camera，支持android 和ios，功能还挺强大的，有兴趣的朋友可以去看下https://github.com/lwansbrough/react-native-camera。以下是我的自己写的一个仿微信样式写的二维码扫描。

首先导入react-native-camera

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save

react-native link react-native-camera

import React from 'react';import {    StyleSheet,    TouchableOpacity,    View,    Text,    InteractionManager,    Animated,    Easing,    Platform,    Image} from 'react-native';import Camera from 'react-native-camera';var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');export default class CodeReading extends React.Component {    constructor(props) {        super(props);        this.camera = null;        this.state = {            show:true,            anim: new Animated.Value(0),            camera: {                aspect: Camera.constants.Aspect.fill,            },        };    }    componentDidMount(){        InteractionManager.runAfterInteractions(()=>{           this.startAnimation()        });    }    startAnimation(){        if(this.state.show){        this.state.anim.setValue(0)        Animated.timing(this.state.anim,{            toValue:1,            duration:1500,            easing:Easing.linear,        }).start(()=>this.startAnimation());        }    }    componentWillUnmount(){        this.state.show = false;    }    //扫描二维码方法    barcodeReceived = (e) =>{        if(this.state.show){            this.state.show = false;            if (e) {                this.props.navigator.pop()                this.props.ReceiveCode(e.data)            } else {                Alert.alert(                    '提示',                    '扫描失败'                    [{text:'确定'}]                )            }        }    }    render() {        return (            <View style={styles.container}>                {/*导航条*/}                {this.renderNavBar()}                <Camera                    ref={(cam) => {            this.camera = cam;          }}                    style={styles.preview}                    aspect={this.state.camera.aspect}                    onBarCodeRead={this.barcodeReceived.bind(this)}                    barCodeTypes = {['qr']}                >                <View style = {{height: Platform.OS == 'ios' ? (height-264)/3:(height-244)/3,width:width,backgroundColor:'rgba(0,0,0,0.5)',}}>                </View>                    <View style={{flexDirection:'row'}}>                        <View style={styles.itemStyle}/>                            <Image style={styles.rectangle}                                   source={require('../AssetsImages/code_bar.png')}>                                <Animated.View style={[styles.animatiedStyle, {                transform: [{                    translateY: this.state.anim.interpolate({                        inputRange: [0,1],                        outputRange: [0,200]                    })                }]            }]}>                                </Animated.View>                            </Image>                        <View style={styles.itemStyle}/>                    </View>                    <View style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',width:width,alignItems:'center'}}>                        <Text style={styles.textStyle}>将二维码放入框内,即可自动扫描</Text>                    </View>                </Camera>            </View>        );    }    // 导航条    renderNavBar(){        return(            <View style={styles.navBarStyle}>                <TouchableOpacity                    onPress={()=>{this.props.navigator.pop()}}                    style={styles.leftViewStyle}>                    <Image source={{uri:'nav_return'}}                           style={{height:20,width:20}} />                </TouchableOpacity>                <Text style={[styles.navTitleStyle,{marginTop:Platform.OS == 'ios'?12:0,fontSize:20}]}>                    二维码                </Text>            </View>        )    }}const styles = StyleSheet.create({    itemStyle:{        backgroundColor:'rgba(0,0,0,0.5)',        width:(width-200)/2,        height:200    },    textStyle:{        color:'#fff',        marginTop:10,        fontWeight:'bold',        fontSize:18    },    navTitleStyle: {        color:'white',        fontWeight:'bold',    },    navBarStyle:{ // 导航条样式        height: Platform.OS == 'ios' ? 64 : 44,        backgroundColor:'rgba(34,110,184,1.0)',        // 设置主轴的方向        flexDirection:'row',        // 垂直居中 ---> 设置侧轴的对齐方式        alignItems:'center',        justifyContent:'center'    },    leftViewStyle:{        // 绝对定位        // 设置主轴的方向        flexDirection:'row',        position:'absolute',        left:10,        bottom:Platform.OS == 'ios' ? 15:12,        alignItems:'center',        width:30    },    animatiedStyle:{        height:2,        backgroundColor:'#00FF00'    },    container: {        flex: 1,    },    preview: {        flex: 1,    },    rectangle: {        height: 200,        width: 200,    }});

运行效果如下图所示,扫描成功后得到返回值e.data，传回上一个页面展示。

0 0