在这个反应本地 QR码扫描器教程, 我们创建的应用程序将能够实时读取QR码，并在检测时将其内容呈现在屏幕上. 我们将使用反应本地的CLI快速入门.

(注意:如果您需要帮助设置，您可以随时参考 反应本地入门页-不要忘记点击“反应本地 CLI快速入门”按钮, 因为“Expo CLI快速入门”是在撰写本文时预选的.)

为什么要使用反应本地 Scanner?

反应本地 是一个有价值的框架，它借用了React的范式和设计原则，以实现闪电般的速度, 跨平台开发时髦的ui. Facebook, Airbnb, Uber等等 他们已经用反应本地开发了最新的应用程序.

什么是反应本地 Camera?

反应本地 Camera (RNCamera)是 the 当涉及到在反应本地应用中实现相机功能时. 该组件帮助您通过一些简单的函数与本机操作系统通信，以便您可以使用设备硬件. 您可以围绕这些功能构建应用程序，而无需陷入本机代码的麻烦. RNCamera已经支持:

• 照片
• Videos
• 人脸检测
• 条码扫描
• 文字识别(仅限Android)

请注意，RNCamera过去有两种风格:

1. RNCamera
2. RCTCamera(弃用)

所以一定要使用RNCamera，这样你就可以不断获得最新的更新.

Note: 反应本地 Camera很大程度上是基于Expo相机模块和 在两者之间来回切换 很简单.

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

在我们开始反应本地 QR扫描器之前，我们需要安装一些依赖项.

安装RNCamera的依赖

我们的设置至少需要JDK版本1.7(你很可能有)，如果你用的是Android，你需要 buildToolsVersion 25岁以上.0.2. (当然，有 文档中有更详细和最新的列表.)

首先，让我们从创建一个新的反应本地项目开始:

react-native init CameraExample

现在让我们在手机上部署反应本地 QR扫描仪示例的第一个版本.

cd CameraExample
react-native运行android

它应该看起来像下面的截图:

现在是时候安装 react-native-camera 在我们的项目中. 我们将使用“react-native的大部分自动安装”选项. (还有其他类似的 大部分是CocoaPods自动安装 and 手动安装，但我们将坚持第一个选择，因为它是最有效的.)只需运行:

NPM install react-native-camera——save
React-native链接

还必须将以下权限添加到 android / app / src / main / AndroidManifest.xml:

   包= " com.cameraexample”>

     
+    
+    
+    
+    

     如果不定义它，就会得到错误:


     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进行文本/人脸/条形码识别.

安装完成后，您将需要使用 运行android 要安装新的依赖项:

react-native运行android


如果一切顺利, 你应该会再次在你的设备或模拟器上看到相同的反应本地欢迎屏幕.

设置摄像头

首先，让我们从修改开始 App.js 和导入 RNCamera there:

从'react-native-camera'导入{RNCamera};


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

   呈现(){
     回报(
       
-        Welcome to 反应本地!
-        To get started, edit App.js
-        {instructions}
+         {
+            这.Camera = ref;
+          }}
+          风格= {{
+ flex: 1，
+ width: '100%'，
+          }}
+        >
+        
       
     );
   }


添加以下代码后, 你的界面应该有摄像头, 全屏, 就像下面的截图:



现在我们的反应本地条形码扫描器可以看到条形码(如我们所见) 我们的测试QR码 显示在上面的显示器上)，但还不能读取它们. 让我们使用RNCamera的算法来识别它们每个里面写的内容.

读取条码信息

为了读取条码信息，我们将使用 onGoogleVisionBarcodesDetected 这样我们就可以调用函数并提取信息. 我们把它加到  组件，并将其链接到 barcodeRecognized 函数来处理它. 请注意, onGoogleVisionBarcodesDetected 对象返回一个包含 条形码 属性，其中包含相机中识别的所有条形码的数组.

Note: The onGoogleVisionBarcodesDetected 二维码技术只能在安卓系统上使用, 但是如果你想要一个跨平台的方法, 你最好和我一起去 onBarCodeRead. 它一次只支持一个条形码——使用它作为备份留给读者作为练习.

下面是我们如何  应该注意添加 onGoogleVisionBarcodesDetected:

        {
            this.Camera = ref;
          }}
          风格= {{
            flex: 1、
            宽度:100%,
          }}
          onGoogleVisionBarcodesDetected ={这.barcodeRecognized}
        >
        


现在我们可以处理条形码了 App.js 使用下面的函数, 它只会在检测到条形码时警告我们，并应在屏幕上显示其内容:

  barcodeRecognized = ({ 条形码 }) => {
    条形码.forEach(barcode => console.警告(条形码.data))
  };


下面是它的实际效果:



渲染条形码叠加

前面的截图现在显示了条形码中包含的信息，但不允许我们知道哪个消息属于哪个条形码. 为此，我们将深入探讨 条形码 回来 onGoogleVisionBarcodesDetected 试着找出屏幕上的每个条形码.

但首先, 我们需要将识别的条形码保存到状态中，以便我们可以访问它并根据所包含的数据呈现覆盖. 现在我们将修改之前定义的函数，看起来像这样:

barcodeRecognized = ({ 条形码 }) => this.setState({条形码});


现在我们需要添加a state 对象初始化为一个空的条形码数组，这样它就不会在 render 功能:

export default class App extends Component {
  状态= {
    条形码:[],
  }
// ...


现在创建 renderBarCodes 函数中应该添加的  组件:

         {
            this.Camera = ref;
          }}
          风格= {{
            flex: 1、
            宽度:100%,
          }}
          onGoogleVisionBarcodesDetected ={这.barcodeRecognized}
        >
          {this.renderBarcodes ()}
        


这个函数现在应该从状态中识别条形码并在屏幕上显示它们:

  renderBarcodes = () => (
    
      {this.state.条形码.地图(这.renderBarcode)}
    
  );


注意，映射指向 renderBarcode 哪个应该在屏幕上呈现每个条形码. 我添加了一些小的样式，以便我们能够轻松地识别这些:

 renderBarcode = ({ bounds, data }) => (
    
      
        {data}
      
    
  );


每个识别的条形码有:


  
A bounds 属性告诉我们在屏幕上的哪个位置找到了条形码, 我们将使用哪个来渲染它的覆盖
  
A data 属性，显示在特定条形码中编码的内容
  
A type 属性，告诉我们它是哪种条形码(2D, QR等).)


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



跨平台部署

正如前面提到的, RNCamera将相机模块的原生部分抽象为一种通用的跨平台语言. 需要注意的是，有些功能可能只在一个平台上可用，或者它们可能以不同的方式在另一个平台上编写. 确保您打算构建的内容在所需的所有平台上都得到支持, 一定要经常阅读 文档 作为第一步. 此外，……总是更好的 在不同的设备上测试边缘情况 在您完成实现之后，这样您就可以确定您的产品的健壮性.

继续解码

我希望这小小的滋味 增强现实开发 很有帮助, 现在你的手机或模拟器上已经运行了反应本地中的基本QR码扫描器. 如果您有任何问题或要求，请随时发表评论!