React Native相机介绍

简介

对于React Native应用程序来说，与相机、QR扫描和文本识别一起工作是一个复杂的问题。这是一个需要在原生开发中操作相机的大量工作。如果你在React Native的跨平台移动开发中，在操作摄像头时遇到困难，React Native Camera正是你需要的。

今天我又来谈谈我们如何用React Native轻松处理利用手机摄像头的问题。让我向你介绍React Native Camera。

在这篇文章中，我将通过开发一个二维码扫描应用来演示React Native Camera。这个应用将使我们能够实时扫描二维码，并通过应用在屏幕上显示其内容。

什么是React Native Camera？

React Native Camera是React Native中的一个综合相机组件。它可以让你控制摄像头，并与本地操作系统和设备硬件进行通信。

React Native Camera支持以下内容。

• 照片
• 视频
• 人脸检测
• 条形码扫描
• 文本识别

它是一个完全开源的项目，随时欢迎拉动请求。它也有很好的文档。

它在GitHub上有9.2k颗星，在npm上每月有17.5万用户下载。

React Native Camera是基于 expo-camera模块。因此，我们可以使用React Native Camera与Expo。

你可以通过运行以下命令来安装expo-camera 。

expo install expo-camera

它还可以进行人脸检测、条形码扫描和拍照。你只需要从expo-camera 中导入Camera 。

import { Camera } from 'expo-camera';

用React Native Camera构建一个QR扫描仪

现在，为了正确理解React Native Camera，让我们创建一个带有QR扫描仪的简单React Native项目。我将使用一个iOS设备来构建和测试。

设置项目

在我们开始之前，我需要用以下几行代码创建一个新的React Native项目。

react-native init react_native_scanner
cd react_native_scanner
npm run ios

太棒了，我们已经成功创建了我们的React Native应用。

接下来，我们应该为我们的项目安装React Native Camera包。让我们用以下命令进行安装。

npm install react-native-camera --save
cd ios && pod install && cd ..

接下来，我们需要给我们的应用程序添加iOS权限Info.plist 。

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

现在，我们应该在我们的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"/>

最后但并非最不重要的是，我们应该修改android/app/build.gradle 文件。

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

之后，如果我们运行应用程序并且一切正常，那么我们就可以进行编码了!

塑造应用程序的风格

让我们通过添加以下导入来改变我们的App.js 文件。

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, SafeAreaView } from 'react-native';
import { RNCamera } from 'react-native-camera'

我们将导入并使用RNCamera 组件来与相机通信。如果你有兴趣，你可以在这里阅读更多关于RNCamera的信息。

接下来，我们将修改我们的主屏幕。让我们删除之前生成的代码，以便用SafeAreaView 添加一个topBar ，用View 和Text 添加一个标题。

然后，我将添加上面提到的RNCamera ，以便与相机通信，并添加一个TouchableOpacity 按钮，以便用户扫描二维码。

<View style={styles.screen}>
  <SafeAreaView style={styles.saveArea}>
    <View style={styles.topBar}>
      <Text style={styles.topBarTitleText}>React Native Scanner</Text>
    </View>
  </SafeAreaView>

  <View style={styles.caption}>
    <Text style={styles.captionTitleText}>Welcome To React-Native-Camera Tutorial</Text>
  </View>

  <RNCamera style={styles.rnCamera} />

  <View style={styles.cameraControl}>
    <TouchableOpacity style={styles.btn}>
      <Text style={styles.btnText}>New QR Scan</Text>
    </TouchableOpacity>
  </View>
</View>

让我们更新我们的topBar 的样式，使其成为绿色，并将标题文本改为黑色。

const styles = StyleSheet.create({
  topBar: {
    height: 50,
    backgroundColor: '#62d1bc', // green
    alignItems: 'center',
    justifyContent: 'center',
  },
  topBarTitleText: {
    color: '#ffffff', // white
    fontSize: 20,
  },
  caption: {
    height: 120,
    justifyContent: 'center',
    alignItems: 'center',
  },
  captionTitleText: {
    color: '#121B0D', // black
    fontSize: 16,
    fontWeight: '600'
  },
});

我将使用useState ，以存储来自React Native Camera的QR码。让我们在我们的App.js ，初始状态null ，添加以下一行。

function App() {
  const [barcode, setBarcode] = useState(null);
  ...
}

我们将简单地通过调用setBarcode 来存储QR码，并通过barcode 来显示它。

此外，我还添加了RNCamera ，并进行了这样的样式设计。这样，它就不会在屏幕上占用太多的空间，我们就能看到应用程序的其他部分。

const styles = StyleSheet.create({
  ...
  rnCamera: {
    flex: 1,
    width: '94%',
    alignSelf: 'center',
  }
})

如果你想查看所有的样式选项，你可以在GitHub上查看样式表，这里。

现在，如果你运行这个应用程序，我们的用户界面将看起来像下面的照片。

扫描一个二维码

如果你试图扫描一个二维码，你还不能阅读它。因此，我将使用 onBarCodeRead方法在相机检测到二维码的时候检索条码信息。

这个函数返回几个属性，包括。

• data ，二维码的文字表述
• rawData ，二维码中的编码数据
• uri ，在你的应用程序的缓存中保存的图像的路径（仅适用于iOS）。
• type ，二维码的类型（qr、aztec、code93，等等）。
• bounds, 图像大小和原点数据（x和y）。

让我们更新我们的App.js 文件，以显示从QR码读取的信息。

function App() {
  const [barcode, setBarcode] = useState(null);

  return (
    <View style={styles.screen}>
      <SafeAreaView style={styles.saveArea}>
        <View style={styles.topBar}>
          <Text style={styles.topBarTitleText}>React Native Scanner</Text>
        </View>
      </SafeAreaView>

      <View style={styles.caption}>
        <Text style={styles.captionTitleText}>Welcome To React-Native-Camera Tutorial</Text>
      </View>

      {barcode ? (
        <View style={[styles.rnCamera, styles.rmCameraResult]}>
          <Text style={styles.rmCameraResultText}>{barcode.data}</Text>
          <Text style={styles.rmCameraResultText}>{barcode.type}</Text>
        </View>
      ) : (
        <RNCamera
          style={styles.rnCamera}
          onBarCodeRead={setBarcode}
        />
      )}

      <View style={styles.cameraControl}>
        <TouchableOpacity style={styles.btn} onPress={() => setBarcode(null)}>
          <Text style={styles.btnText}>New QR Scan</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

上面，我们已经使用onBarCodeRead 函数从QR码中提取了信息，并通过调用setBarcode 方法将其保存在React状态。

然后，我们已经显示了条形码数据和类型，如果条形码不是null 。如果你想再次扫描，你可以按下New QR Scan 按钮，状态数据将被设置为null 。

就这样了!这就是最后的应用程序。

如果你想看到所有的代码，你可以在这里查看Github repo。

总结

React Native Camera是一个令人难以置信的软件包，可以帮助开发者将设备摄像头用于用React Native构建的iOS和Android应用。除了我们的例子二维码扫描器，你还可以进行文本识别、人脸检测，以及捕捉视频和图像。

谢谢你的阅读。我希望你觉得这篇稿子很有用。编码愉快

The postIntro to React Native Cameraappeared first onLogRocket Blog.