您还需要设置维度策略 android/app/build.gradle—it has no default and 如果不定义它，就会得到错误:

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

注意:维度策略通常应该设置为 general as above. However, you can set it to mlkit instead, if you’d like to 使用MLKit进行文本/人脸/条形码识别.

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

react-native run-android

If everything went well, 你应该会再次在你的设备或模拟器上看到相同的React Native欢迎屏幕.

Setting Up the Camera

首先，让我们从修改开始 App.js and importing RNCamera there:

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

Next, we’ll modify the render 函数来包含我们新导入的 RNCamera. Notice the style 属性添加到相机，以便它采取全屏. Without these styles, 您可能无法在屏幕上看到相机渲染, 因为它不占任何空间:

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

After adding this code, 你的界面应该有摄像头, full-screen, 就像下面的截图:

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

Reading Barcode Information

为了读取条码信息，我们将使用 onGoogleVisionBarcodesDetected 这样我们就可以调用函数并提取信息. Let’s add that in the component and link it to a barcodeRecognized function to take care of it. Note that onGoogleVisionBarcodesDetected 对象返回一个包含 barcodes 属性，其中包含相机中识别的所有条形码的数组.

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

Here’s how our should look after adding onGoogleVisionBarcodesDetected:

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

现在我们可以处理条形码了 App.js with the function below, 它只会在检测到条形码时警告我们，并应在屏幕上显示其内容:

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

Here’s how it looks in action:

Rendering Barcode Overlays

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

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

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

We will now need to add a state 对象初始化为一个空的条形码数组，这样它就不会在 render functions:

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

Let’s now create the renderBarCodes 函数中应该添加的 component:

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

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

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

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

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

Each barcode recognized has:

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

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

Cross-platform Deployment

As mentioned, RNCamera将相机模块的原生部分抽象为一种通用的跨平台语言. 需要注意的是，有些功能可能只在一个平台上可用，或者它们可能以不同的方式在另一个平台上编写. 确保您打算构建的内容在所需的所有平台上都得到支持, make sure to always read the documentation as a first step. 此外，……总是更好的 在不同的设备上测试边缘情况 在您完成实现之后，这样您就可以确定您的产品的健壮性.

Go Forth and Decode

I hope this small taste of augmented reality development has been helpful, 现在你的手机或模拟器上已经运行了React Native中的基本QR码扫描器. 如果您有任何问题或要求，请随时发表评论!