React Native实现扫描功能

1. 版本相关：

1. Android

2. "react-native": "0.62.2"

3.  "react-native-camera": "^4.2.1",

 2.安装配置

官网很详细https://react-native-camera.github.io/react-native-camera/docs/installation

1. 安装：npm install react-native-camera --save
2. 配置：

android/app/src/main/AndroidManifest.xml 目录

<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

android/app/build.gradle目录

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

3.使用

配置完成，现在就可以封装扫描组件了。封装好组件以后在其他界面可以随时调用。

下面是封装的扫描组件Scanner

import React, {Component, Fragment} from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Easing,
  Text,
  InteractionManager,
  Keyboard,
  BackHandler,
  TouchableOpacity,
} from 'react-native';
import {RNCamera} from 'react-native-camera';
import RootSiblings from 'react-native-root-siblings';
import PropTypes from 'prop-types';
import AntIcon from 'react-native-vector-icons/AntDesign';
import {setHeight, setWidth