react-native-camera 扫描二维码

Github：https://github.com/react-native-community/react-native-camera

android:

1、npm install react-native-camera --save

     之后直接 react-native link react-native-camera 有问题在手动配置

2、settings.gradle:

include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-camera/android')

3、app/build.gradle

dependencies {
    ...
    compile project(':react-native-camera')
}

4、AndroidManifest.xml：

<uses-permission android:name="android.permission.CAMERA" />//相机权限
<uses-permission android:name="android.permission.VIBRATE" />//震动权限
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />

5、MainApplication.java：

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new RNCameraPackage()
      );
}

ios:

1、使用Xcode打开CameraDemo/ios/CameraDemo.xcodeproj文件，在Project navigator->Libraries文件夹上右击选择Add Files to 'CameraDemo'

2、选择项目中的node_modules->react-native-camera并且添加RCTCamera.xcodeproj文件

3、在Build Phases中添加libRCTCamera.a

4、在Build Settings中找到Search Paths下的Header Search Paths，添加$(SRCROOT)/../../react-native/React和$(SRCROOT)/../../../React，并且选择recursive

5、打开nfo.plist文件，添加权限

NSCameraUsageDescription       请允许使用您的相机

import React, {Component} from 'react';
import {
    StyleSheet, 
    View,
    Animated,
    Easing,
    Platform,
    Text,
    Dimensions,
    InteractionManager
} from 'react-native';

import { RNCamera } from 'react-native-camera'
const { width,height } = Dimensions.get('window')
 
export default class Camera extends Component {
    constructor(props) {
        super(props);
        this.state = {
            transCode:'', // 条码
            type: '', // 条码类型
            show: true,
            animate: new Animated.Value(0), // 二维坐标{x:0,y:0}
        }
    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(() => {
            this.startAnimation()
        })
    }
    // 动画开始
    startAnimation(){
        if(this.state.show){
            this.state.animate.setValue(0);
            Animated.timing(this.state.animate,{
                toValue: 1,   // 运动终止位置，比值
                duration: 2500,  // 动画时长
                easing: Easing.linear,  // 线性的渐变函数
                delay: 0.5,// 在一段时间之后开始动画（单位是毫秒），默认为0
            }).start(() => this.startAnimation())
        }
    }
    componentWillUnmount(){
        this.state.show = false;
    }
    barcodeReceived(e){
        if(this.state.show){
            console.log(e);
            this.setState({
                transCode: e.data,
                type: e.type,
                show: false
            })
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    onBarCodeRead={this.barcodeReceived.bind(this)}
                    onCameraReady={() => {
                        console.log('ready')
                    }}
                    permissionDialogTitle={'Permission to use camera'}
                    permissionDialogMessage={'We need your permission to use your camera phone'}
                    style={styles.camera}
                >
                    <View style={styles.box}>
                        <View style={styles.kuang}>
                            <Animated.View style={{
                                alignItems: 'center',
                                transform: [{
                                    // translateX: x轴移动
                                    // translateY: y轴移动
                                    translateY: this.state.animate.interpolate({
                                        inputRange: [0,1],
                                        outputRange: [0,200]
                                    })
                                }]
                            }}>
                                <Text style={{width:250,height:1,backgroundColor:'#00ff00'}}></Text>
                            </Animated.View>
                        </View>
                    </View>
                    <View style={styles.info}>
                        <Text>条码信息：{this.state.transCode}</Text>
                        <Text>条码类型：{this.state.type}</Text>
                    </View>
                </RNCamera>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    camera: {
        flex: 1,
    },
    box: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
    },
    kuang: {
        width: 260,
        height: 260,
        borderWidth: 1,
        borderColor: 'skyblue',
        backgroundColor: '#rgba(255,255,255,0.1)'
    },
    info: {
        width: width,
        height: 80,
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingBottom:5,
        justifyContent: 'space-around',
    }
});