構建 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 應用程序。 如果您有任何問題或要求，請隨時發表評論！