react-native 实现二维码的扫描功能

react-native 通过react-native-camera实现二维码的扫描功能。
进入扫描界面,扫到结果后取到结果并返回上一级界面。

工具类ShowScanScreen.js
'use strict';
import React, { Component } from 'react';
import { StyleSheet, View, StatusBar, TouchableOpacity, Image, Text, Vibration } from 'react-native';
import Camera from 'react-native-camera';
import { Actions } from 'react-native-router-flux';

const IconLeft = (
     {
                Actions.pop();

        }}>
        
        

    
);
let isFirstIn = true;
export default class ShowScanScreen extends Component {
    initData() {
        isFirstIn = true;
    }

    constructor(props) {
        super(props);
        this.initData();

        this.camera = null;

        this.state = {
            camera: {
                aspect: Camera.constants.Aspect.sretch,
                captureTarget: Camera.constants.CaptureTarget.cameraRoll,
                type: Camera.constants.Type.back,
                orientation: Camera.constants.Orientation.auto,
                flashMode: Camera.constants.FlashMode.auto,
            },
            isRecording: false,
        };

        this.takePicture = this.takePicture.bind(this);
        this.startRecording = this.startRecording.bind(this);
        this.stopRecording = this.stopRecording.bind(this);
        this.switchType = this.switchType.bind(this);
        this.switchFlash = this.switchFlash.bind(this);
    }

    takePicture() {
        if (this.camera) {
            this.camera.capture()
                .then((data) => console.log(data))
                .catch(err => console.error(err));
        }
    }

    startRecording() {
        if (this.camera) {
            this.camera.capture({ mode: Camera.constants.CaptureMode.video })
                .then((data) => console.log(data))
                .catch(err => console.error(err));
            this.setState({
                isRecording: true
            });
        }
    }

    stopRecording() {
        if (this.camera) {
            this.camera.stopCapture();
            this.setState({
                isRecording: false
            });
        }
    }

    switchType() {
        let newType;
        const { back, front } = Camera.constants.Type;

        if (this.state.camera.type === back) {
            newType = front;
        } else if (this.state.camera.type === front) {
            newType = back;
        }

        this.setState({
            camera: {
                ...this.state.camera,
                type: newType,
            },
        });
    }

    get typeIcon() {
        let icon;
        const { back, front } = Camera.constants.Type;

        if (this.state.camera.type === back) {
            icon = require('../assets/ic_camera_rear_white.png');
        } else if (this.state.camera.type === front) {
            icon = require('../assets/ic_camera_front_white.png');
        }

        return icon;
    }

    switchFlash() {
        let newFlashMode;
        const { auto, on, off } = Camera.constants.FlashMode;

        if (this.state.camera.flashMode === auto) {
            newFlashMode = on;
        } else if (this.state.camera.flashMode === on) {
            newFlashMode = off;
        } else if (this.state.camera.flashMode === off) {
            newFlashMode = auto;
        }

        this.setState({
            camera: {
                ...this.state.camera,
                flashMode: newFlashMode,
            },
        });
    }

    get flashIcon() {
        let icon;
        const { auto, on, off } = Camera.constants.FlashMode;

        if (this.state.camera.flashMode === auto) {
            icon = require('../assets/ic_flash_auto_white.png');
        } else if (this.state.camera.flashMode === on) {
            icon = require('../assets/ic_flash_on_white.png');
        } else if (this.state.camera.flashMode === off) {
            icon = require('../assets/ic_flash_off_white.png');
        }

        return icon;
    }

    onBarCodeRead(e) {
        console.log(e.data);
        if (isFirstIn) {
            // alert(e.data);
            Vibration.vibrate();
            isFirstIn = false;
            // console.log(StringUtil.object2Json(this.props));
            Actions.pop({ refresh: ({ 'mScanedQRCode': e.data }) });
        } else {

        }

    }

    render() {
        return (
            
                

参考链接:
https://github.com/lwansbrough/react-native-camera

你可能感兴趣的:(react-native 实现二维码的扫描功能)