构建QR扫描仪：React Native Camera教程

本文概述

• 为什么要React Native？
• 什么是React Native Camera？
• 使用RNCamera创建你的第一个应用程序
• 跨平台部署
• 前进并解码

在本React Native Camera教程中, 我们将创建一个QR码阅读器应用程序。它可以实时读取QR码, 并在检测时将其内容呈现到屏幕上。我们将使用React Native的CLI快速入门。

(注意：如果需要帮助进行设置, 可以随时参考React Native入门页面-不要忘记单击” React Native CLI快速入门”按钮, 因为当时已预先选择了” Expo CLI快速入门”撰写本文)。

为什么要React Native？

React Native是一个有价值的框架, 它借鉴了React的范式和设计原则来实现快速, 跨平台的易用UI的开发。 Facebook, Airbnb, Uber和许多其他公司已经使用React Native构建了他们的最新应用程序。

什么是React Native Camera？

当涉及在React Native应用中实现相机功能时, React Native Camera(RNCamera)是必不可少的组件。该组件可帮助你通过一些简单功能与本机OS通信, 以便你可以使用设备硬件。你可以围绕这些功能构建应用程序, 而不必担心本机代码的麻烦。 RNCamera已经支持：

• 摄影作品
• 影片
• 人脸检测
• 条码扫描
• 文字识别(仅适用于Android)

请注意, RNCamera过去有两种形式：

1. RNCamera
2. RCTCamera(已弃用)

…因此请确保使用RNCamera, 以便你可以继续获取最新更新。

注意：React Native Camera很大程度上基于Expo相机模块, 在两者之间来回切换非常容易。

使用RNCamera创建你的第一个应用程序

在开始我们的React Native QR扫描仪之前, 需要安装一些依赖项。

安装RNCamera的依存关系

我们的设置至少需要JDK 1.7版(你很可能已经拥有), 并且如果你使用的是Android, 则需要buildToolsVersion高于25.0.2。 (可以肯定的是, 文档中有更详细和最新的列表。)

首先, 我们先创建一个新的React Native项目：

react-native init CameraExample

现在, 让我们在手机上部署React Native Camera示例的第一个版本。

cd CameraExample
react-native run-android

它看起来应该像下面的屏幕截图：

现在是时候在我们的项目中安装react-native-camera软件包了。我们将使用”大多数使用react-native进行自动安装”选项。 (还有其他类似”大多数情况下使用CocoaPods自动安装”和”手动安装”, 但我们会坚持使用第一种方法, 因为这是最有效的。)只需运行：

npm install react-native-camera --save
react-native link react-native-camera

你还必须向android / app / src / main / AndroidManifest.xml添加以下权限：

   package="com.cameraexample">

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

     <application
       android:name=".MainApplication"

你还需要在android / app / build.gradle中设置维度策略-该策略没有默认设置, 如果未定义, 则会出现错误：

     defaultConfig {
         applicationId "com.cameraexample"
         minSdkVersion rootProject.ext.minSdkVersion
+        missingDimensionStrategy 'react-native-camera', 'general'
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"

注意：尺寸策略通常应如上所述设置为常规。但是, 如果你想将MLKit用于文本/面部/条形码识别, 则可以将其设置为mlkit。

安装后, 你将需要使用run-android安装新的依赖项：

react-native run-android

如果一切顺利, 你应该在设备或模拟器上再次看到相同的React Native欢迎屏幕。

设置相机

首先, 我们先修改App.js并在其中导入RNCamera：

import { RNCamera } from 'react-native-camera';

接下来, 我们将修改渲染功能以包括我们新导入的RNCamera。请注意, 已将样式属性添加到摄像机以使其全屏显示。没有这些样式, 你可能无法在屏幕上看到相机渲染的图像, 因为它不会占据任何空间：

   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
+        <RNCamera
+          ref={ref => {
+            this.camera = ref;
+          }}
+          style={{
+            flex: 1, +            width: '100%', +          }}
+        >
+        </RNCamera>
       </View>
     );
   }

添加此代码后, 你的界面应全屏打开相机, 如以下屏幕截图所示：

现在, 我们可以看到条形码(就像我们在上面的监视器上看到的测试QR码一样), 但我们还无法读取它们。让我们使用RNCamera的算法来识别其中每个内容。

读取条形码信息

为了读取条形码信息, 我们将使用onGoogleVisionBarcodesDetected道具, 以便我们可以调用函数并提取信息。让我们将其添加到<RNCamera>组件中, 并将其链接到barcodeRecognized函数以进行处理。请注意, onGoogleVisionBarcodesDetected返回一个包含条形码属性的对象, 该属性包含相机中识别出的所有条形码的数组。

注意：onGoogleVisionBarcodesDetected QR码技术仅在Android上可用, 但是如果你希望使用跨平台方法, 则最好使用onBarCodeRead。它一次仅支持一个条形码-将其用作后备留给读者练习。

添加onGoogleVisionBarcodesDetected后, 我们的<RNCamera>外观如下：

       <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            flex: 1, width: '100%', }}
          onGoogleVisionBarcodesDetected={this.barcodeRecognized}
        >
        </RNCamera>

现在, 我们可以使用以下功能处理App.js中的条形码, 该功能仅在检测到条形码时才向我们发出警告, 并应在屏幕上显示其内容：

  barcodeRecognized = ({ barcodes }) => {
    barcodes.forEach(barcode => console.warn(barcode.data))
  };

运作方式如下：

渲染条形码叠加

现在, 上一个屏幕截图显示了条形码中包含的信息, 但不允许我们知道哪个消息属于哪个条形码。为此, 我们将更深入地了解从onGoogleVisionBarcodesDetected返回的条形码, 并尝试在屏幕上查明每个条形码。

但是首先, 我们需要将识别出的条形码保存到状态中, 以便我们可以访问它并根据所包含的数据渲染覆盖图。现在, 我们将修改先前定义的函数, 如下所示：

barcodeRecognized = ({ barcodes }) => this.setState({ barcodes });

现在, 我们需要添加一个初始化为空条形码数组的状态对象, 以免在渲染函数中产生任何错误：

export default class App extends Component<Props> {
  state = {
    barcodes: [], }
// ...

现在创建创建renderBarCodes函数, 该函数应添加到<RNCamera>组件内部：

        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            flex: 1, width: '100%', }}
          onGoogleVisionBarcodesDetected={this.barcodeRecognized}
        >
          {this.renderBarcodes()}
        </RNCamera>

现在, 此功能应获取从状态中识别出的条形码并将其显示在屏幕上：

  renderBarcodes = () => (
    <View>
      {this.state.barcodes.map(this.renderBarcode)}
    </View>
  );

请注意, 映射指向renderBarcode, 它将在屏幕上呈现每个条形码。我添加了一些较小的样式, 以便我们能够轻松识别这些样式：

 renderBarcode = ({ bounds, data }) => (
    <React.Fragment key={data + bounds.origin.x}>
      <View
        style={{
          borderWidth: 2, borderRadius: 10, position: 'absolute', borderColor: '#F00', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.9)', padding: 10, ...bounds.size, left: bounds.origin.x, top: bounds.origin.y, }}
      >
        <Text style={{
          color: '#F00', flex: 1, position: 'absolute', textAlign: 'center', backgroundColor: 'transparent', }}>{data}</Text>
      </View>
    </React.Fragment>
  );

每个识别的条形码具有：

• 一个bounds属性, 用于告诉我们在屏幕上的何处找到了条形码, 我们将使用该条形码渲染条形码的叠加层
• 数据属性, 向我们显示特定条形码中的编码
• 一个类型属性, 告诉我们它是哪种条形码(2D, QR等)

像上面的render函数一样, 使用这三个参数可以得到以下结果：

跨平台部署

如前所述, RNCamera将摄影机模块的本机部分抽象为通用的跨平台语言。请务必注意, 某些功能仅在一个平台上可用, 或者它们在另一平台上的书写方式可能不同。为确保所需的所有平台都支持要构建的内容, 请务必始终阅读文档。此外, 实施完后最好在不同设备上测试边缘情况, 以确保产品的坚固性。

前进并解码

我希望对增强现实开发的这种小尝试会有所帮助, 并且你现在已经在手机或模拟器上运行了基本的React Native Camera应用程序。如有任何疑问或要求, 请随时发表评论！

相关：深入研究React Native(初学者教程)