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

Posted 2021-05-10 zlzbt

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

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>

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

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

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>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 ( 
            <View style={styles.container}>
                <NavBar
                    onLeftClick={this.closeScanPage.bind(this)}
                    title={Language.t('扫描二维码')} />
                <SafeAreaView style={styles.container}>
                    <RNCamera
                        onCameraReady={() => {
                            console.log('ready')
                        }}
                        ref={ref => {
                            this.camera = ref;
                        }}
                        onBarCodeRead={this.onBarCodeRead.bind(this)}
                        style={styles.scan_camera}
                    >
                        <View style={styles.scan_cont_box}>
                            <View style={styles.scan_cont_circle}>
                                <Animated.View style={{
                                    alignItems: 'center',
                                    transform: [{
                                        translateY: this.state.animateCode.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 200]
                                        })
                                    }]
                                }}>
                                    <Text style={styles.scan_circle_init}></Text>
                                </Animated.View>
                            </View>
                        </View>
                        <View style={styles.scan_info_box}>
                            <Text style={styles.scan_info}>将二维码放入框内，即可自动扫描</Text>
                        </View>
                    </RNCamera>
                </SafeAreaView>
            </View>
        )
    }
}