I have worked on camera components before, but now I also meet the demand, and I will record it by the way.

It is divided into the following three steps:

  1. This section describes component versions and functions.
  2. Install and use.
  3. Interface implementation.

First on the final realization of the effect:

​

One, version introduction

The following is the version information used in the project:

"React" : "16.8.6", "the react - native" : "0.60.5", "the react - native - camera" : "^ 3.8.0." "Copy the code

The desired function is to scan a QR code, and there are buttons below to take photos and turn on the flash.

Two, installation and use

After React-Native 0.60, installation is very simple and no link is required.

1. First, run the NPM installation command in the project root directory as follows:

NPM install [email protected]Copy the code

2. Then, you need to CD to the iOS directory and run pod Install to automatically install the iOS dependencies.

3. You need to configure the camera and microphone permissions in the iOS info.plist, and in the Android Androidmanifest.xml, as shown below:

​

IOS Permission Configuration

​

Android Permission Configuration

/ / android added to AndroidManifest. XML < USES - permission android: name = "android. Permission. RECORD_AUDIO" / > < USES - the permission Android: name = "android. Permission. CAMERA" / > / / iOS to info. Choose the following Privacy - plist Microphone Usage Description Privacy - Camera Usage DescriptionCopy the code

4, add the following configuration to android/app/build.gradle:

​

The android build. Gradle configuration

Three, interface implementation

The screen is as follows, including return, camera, and flash (PS: black because there is no camera in the simulator).

​

Scan the interface

After taking a photo or recognizing the QR code, jump to the result page:

​

Result Scan page

The specific code is as follows:

/** * Created by Supervons on 2019/10/20. * Explore page */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Animated,
  Easing
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import {Icon, IconType} from 'react-native-elements';
export default class Scanner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      moveAnim: new Animated.Value(0),
      FlashMode: false.showCamera: true
    };
    this.isBarcodeRead = false;
  }

  // Remove navigation bar Settings and scan full screen
  static navigationOptions = {
    header: null
  };

  componentDidMount() {
    this.startAnimation();
    When the result page returns, restart the camera to listen for scan events
    this.props.navigation.addListener("didFocus".() = >
        this.setState({showCamera : true})
    )
  }

  startAnimation = () = > {
    this.state.moveAnim.setValue(-200);
    Animated.timing(this.state.moveAnim, {
      toValue: 0.duration: 1500.easing: Easing.linear
    }).start(() = > this.startAnimation());
  };

  // Scan events
  onBarCodeRead = result= > {
    if (!this.isBarcodeRead) {
      this.isBarcodeRead = true;
      // Uninstall the scan component, otherwise the scan will continue
      this.setState({showCamera: false})
      this.props.navigation.navigate('ScannerResult', {
        imageUri: null.scannerResult: JSON.stringify(result) }); }};// Photo event
  takePicture = async() = > {if (this.camera) {
      const options = { quality: 0.5.base64: true };
      const data = await this.camera.takePictureAsync(options);
      this.setState({showCamera: false})
      this.props.navigation.push('ScannerResult', {
        imageUri: data.uri,
        scannerResult: ' '}); }};// Flash switch
  _changeFlashMode() {
    this.setState({
      FlashMode:!this.state.FlashMode
    });
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.showCamera ? (
          <RNCamera
            ref={ref= > {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={this.state.FlashMode ? 1 : 0}
            onBarCodeRead={this.onBarCodeRead}
          >
            <View style={styles.rectangleContainer}>
              <View style={styles.rectangle} />
              <Animated.View
                style={[
                  styles.border,
                  { transform: [{ translateY: this.state.moveAnim}}]]} / >
              <Text style={styles.rectangleText}>Put the QR code into the box, can be automatically scanned</Text>
              <View style={{ flexDirection: 'row', marginTop: 15}} >
                <TouchableOpacity
                  onPress={()= >this.props.navigation.goBack()}
                >
                  <Icon name='keyboard-arrow-left' size={36} color={'green'} / >
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={this.takePicture.bind(this)}
                  style={{marginLeft: 25}}
                >
                  <Icon name='camera' size={36} color={'green'} / >
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={this._changeFlashMode.bind(this)}
                  style={{marginLeft: 25}}
                >
                  <Icon name='highlight' size={36} color={this.state.FlashMode ? 'green' : 'gray'} / >
                </TouchableOpacity>
              </View>
            </View>
          </RNCamera>
        ) : (
          <View />
        )}
      </View>); }}Copy the code

CSS is as follows

  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  rectangle: {
    height: 200,
    width: 200,
    borderWidth: 1,
    borderColor: '#00FF00',
    backgroundColor: 'transparent'
  },
  rectangleText: {
    flex: 0,
    color: '#fff',
    marginTop: 10
  },
  border: {
    flex: 0,
    width: 195,
    height: 2,
    backgroundColor: '#00FF00'
  }
Copy the code

Git project address: github.com/supervons/E…