构建 QR 扫描仪：React Native 相机教程

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

（注意：如果你在设置方面需要帮助，可以随时参考 React Native 入门页面——不要忘记点击“React Native CLI 快速入门”按钮，因为当时已经预选了“Expo CLI 快速入门”写这篇文章。）

为什么反应原生？

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

什么是 React Native 相机？

在 React Native 应用程序中实现相机功能时，React Native Camera (RNCamera)是首选组件。 该组件通过一些简单的功能帮助您与本机操作系统进行通信，以便您可以使用设备硬件。 您可以围绕这些功能构建您的应用程序，而无需陷入原生代码的麻烦。 RNCamera 已经支持：

• 照片
• 视频
• 人脸检测
• 条码扫描
• 文本识别（仅限 Android）

请注意，RNCamera 曾经有两种风格：

1. RN相机
2. RCTCamera（已弃用）

…所以请务必使用 RNCamera，以便您可以不断获取最新更新。

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

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

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

安装 RNCamera 的依赖项

我们的设置至少需要 JDK 版本 1.7（您很可能拥有），如果您使用的是 Android，则需要比buildToolsVersion更新的 buildToolsVersion。 （可以肯定的是，文档中有更详细和最新的列表。）

首先让我们开始创建一个新的 React Native 项目：

 react-native init CameraExample

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

 cd CameraExample react-native run-android

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

现在是时候在我们的项目中安装react-native-camera包了。 我们将使用“使用 react-native 自动安装”选项。 （还有其他方法，例如 Mostly automatic install with CocoaPods 和 Manual install，但我们将坚持第一个选项，因为它是最有效的。）只需运行：

 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"

注意：维度策略通常应如上所述设置为general 。 但是，如果您想使用 MLKit 进行文本/面部/条形码识别，您可以将其设置为mlkit 。

安装后，您需要使用run-android安装新的依赖项：

 react-native run-android

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

设置相机

首先，让我们从修改App.js并在那里导入RNCamera开始：

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

接下来，我们将修改render函数以包含我们新导入的RNCamera 。 请注意添加到相机的style属性，以便它可以全屏显示。 如果没有这些样式，您可能无法在屏幕上看到相机渲染，因为它不会占用任何空间：

 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> ); }

添加此代码后，您的界面应该会打开相机，全屏，就像下面的屏幕截图一样：

现在我们可以看到条形码（因为我们可以在上面的监视器上看到我们的测试二维码）但我们还不能读取它们。 让我们使用 RNCamera 的算法来识别每个里面写的内容。

读取条码信息

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

注意： onGoogleVisionBarcodesDetected QR 码技术仅适用于 Android，但如果您想要跨平台方法，最好使用onBarCodeRead 。 它一次只支持一个条形码——将其用作后备，留给读者作为练习。

下面是我们的<RNCamera>添加onGoogleVisionBarcodesDetected后的样子：

 <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返回的barcodes ，并尝试精确定位屏幕上的每个条形码。

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

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

我们现在需要添加一个初始化为空条形码数组的state对象，这样它就不会在我们的render函数中产生任何错误：

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

现在让我们创建应该添加到<RNCamera>组件中的renderBarCodes函数：

 <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属性，告诉我们在屏幕上的哪个位置找到了条形码，我们将使用它来渲染它的叠加层
• 向我们展示特定条形码中编码内容的data属性
• 一个type属性，它告诉我们它是什么类型的条形码（2D、QR 等）

使用上面渲染函数中的这三个参数会得到以下结果：

跨平台部署

如前所述，RNCamera 将相机模块的原生部分抽象为通用的跨平台语言。 重要的是要注意，某些功能仅在一个平台上可用，或者在另一个平台上可能有不同的编写方式。 为确保您想要构建的内容在您需要的所有平台上均受支持，请务必首先阅读文档。 此外，在您完成实施后，最好在不同设备上测试边缘案例，这样您就可以确定产品的稳健性。

继续解码

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