构建QR扫描仪（React Native Camera教程） _QR

本文概述

为什么要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过去有两种形式：

RNCamera
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应用程序。如有任何疑问或要求, 请随时发表评论！
【构建QR扫描仪（React Native Camera教程）】相关：深入研究React Native(初学者教程)