React Native - 使用库 react-native-camera 调用摄像头扫描二维码以及条形码

一：react-native-camera介绍

• react-native-camera 是一个第三方的开源库，我们可以通过它来调用设备的摄像头，从而实现拍照、或者录像功能。
• react-native-camera 功能强大，我们可以选择使用哪个摄像头、是拍照还是录像、是否录制声音、是否开启闪光灯、视图比例、拍摄质量、拍摄方向、触摸功能、条形码/二维码扫描等等。

二：安装配置

react-native init myrncamera2
cd myrncamera2
// A Camera component： https://github.com/lwansbrough/react-native-camera
npm install react-native-camera --save 
// link组件
react-native link react-native-camera  

配置android工程

首先在android目录下加入local.properties(命令行创建工程，默认不包含该文件，指定android工程sdk目录sdk.dir)

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 中添加：

dependencies {
    ……
    implementation project(':react-native-camera')
}

defaultConfig{
    ……
    missingDimensionStrategy 'react-native-camera', 'general' // 添加
}

3：android/app/src/main/AndroidManifest.xml 中添加：

    
    
    
    

4：android/app/src/main/java/[…]/MainApplication.java 中添加：

    import com.lwansbrough.RCTCamera.RCTCameraPackage; //添加

    @Override
    protected List getPackages() {
      return Arrays.asList(
          ……
          new RCTCameraPackage() // 添加
      );
    }

三：启动使用组件

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    Animated,
    Easing,
    InteractionManager,
    TouchableOpacity,
    Image,
    SafeAreaView,
    Dimensions,
    Button
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import _L from 'lodash';
import NavBar from '../NavBar'
import styles from './style';
import Language from '../../../language/i18n';
const { width, height } = Dimensions.get('window');


export default class BarCodePage extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            animateCode: new Animated.Value((width - 200) / 2,(height - 340) / 2), // 二维坐标
        }
    }

    componentDidMount() {
        this.startAnimation()
    }

    // 动画开始
    startAnimation() {
        this.state.animateCode.setValue(0)
        Animated.timing(this.state.animateCode, {
            toValue: 1,             // 运动终止位置，比值
            duration: 2500,         // 动画时长
            easing: Easing.linear,  // 线性的渐变函数
            delay: 0.3,             // 在一段时间之后开始动画（单位是毫秒），默认为0
        }).start(() => this.startAnimation())
    }

    // 关闭扫一扫
    closeScanPage() {
        const params = this.props.navigation.state.params;
        const {pageName} = params;
        this.props.navigation.navigate(pageName, params);
    }

    onBarCodeRead(e) {
        const params = this.props.navigation.state.params;
        const {pageName, key} = params;
        if(e.data) {
            let barCodeData = {};
            barCodeData.typeName = _L.trim(key);
            barCodeData.typeValue = e.data;
            this.props.navigation.navigate(pageName, {barCodeData})
        }
    }

    render() { 
        return ( 
            
                
                
                     {
                            console.log('ready')
                        }}
                        ref={ref => {
                            this.camera = ref;
                        }}
                        onBarCodeRead={this.onBarCodeRead.bind(this)}
                        style={styles.scan_camera}
                    >
                        
                            
                                
                                    
                                
                            
                        
                        
                            将二维码放入框内，即可自动扫描
                        
                    
                
            
        )
    }
}