作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
曾创建多家初创公司,并与微软合作, 巴萨姆擅长于高度可扩展, 全栈JavaScript应用程序.
在这个React Native QR码扫描器教程, 我们创建的应用程序将能够实时读取QR码,并在检测时将其内容呈现在屏幕上. 我们将使用React Native的CLI快速入门.
(注意:如果您需要帮助设置,您可以随时参考 React Native入门页-不要忘记点击“React Native CLI快速入门”按钮, 因为“Expo CLI快速入门”是在撰写本文时预选的.)
React Native 是一个有价值的框架,它借用了React的范式和设计原则,以实现闪电般的速度, 跨平台开发时髦的ui. Facebook, Airbnb, Uber等等 他们已经用React Native开发了最新的应用程序.
React Native Camera (RNCamera)是 the 当涉及到在React Native应用中实现相机功能时. 该组件帮助您通过一些简单的函数与本机操作系统通信,以便您可以使用设备硬件. 您可以围绕这些功能构建应用程序,而无需陷入本机代码的麻烦. RNCamera already supports:
请注意,RNCamera过去有两种风格:
所以一定要使用RNCamera,这样你就可以不断获得最新的更新.
Note: React Native Camera很大程度上是基于Expo相机模块和 在两者之间来回切换 is pretty easy.
在我们开始React Native QR扫描器之前,我们需要安装一些依赖项.
我们的设置至少需要JDK版本1.7(你很可能有),如果你用的是Android,你需要 buildToolsVersion
newer than 25.0.2. (To be sure, there is 文档中有更详细和最新的列表.)
首先,让我们从创建一个新的React Native项目开始:
react-native init CameraExample
现在让我们在手机上部署React Native QR扫描仪示例的第一个版本.
cd CameraExample
react-native run-android
它应该看起来像下面的截图:
Now it’s time to install the react-native-camera
package in our project. 我们将使用“react-native的大部分自动安装”选项. (There are others like 大部分是CocoaPods自动安装 and Manual install,但我们将坚持第一个选择,因为它是最有效的.) Simply run:
NPM install react-native-camera——save
React-native链接
还必须将以下权限添加到 android / app / src / main / AndroidManifest.xml
:
package="com.cameraexample">
+
+
+
+
您还需要设置维度策略 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欢迎屏幕.
首先,让我们从修改开始 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, just like the screenshot below:
现在我们的React Native条形码扫描器可以看到条形码(如我们所见) our test QR codes 显示在上面的显示器上),但还不能读取它们. 让我们使用RNCamera的算法来识别它们每个里面写的内容.
为了读取条码信息,我们将使用 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:
前面的截图现在显示了条形码中包含的信息,但不允许我们知道哪个消息属于哪个条形码. 为此,我们将深入探讨 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:
bounds
属性告诉我们在屏幕上的哪个位置找到了条形码, 我们将使用哪个来渲染它的覆盖data
属性,显示在特定条形码中编码的内容type
属性,告诉我们它是哪种条形码(2D, QR等).)在上面的渲染函数中使用这三个参数会得到以下结果:
As mentioned, RNCamera将相机模块的原生部分抽象为一种通用的跨平台语言. 需要注意的是,有些功能可能只在一个平台上可用,或者它们可能以不同的方式在另一个平台上编写. 确保您打算构建的内容在所需的所有平台上都得到支持, make sure to always read the documentation as a first step. 此外,……总是更好的 在不同的设备上测试边缘情况 在您完成实现之后,这样您就可以确定您的产品的健壮性.
I hope this small taste of augmented reality development has been helpful, 现在你的手机或模拟器上已经运行了React Native中的基本QR码扫描器. 如果您有任何问题或要求,请随时发表评论!
QR码是一种二维条码,可以被任何电脑摄像头快速读取. In this tutorial, 我们创建了一个基于RNCamera的QR码读取应用程序,它将能够实时读取QR码并在检测时将其内容呈现在屏幕上.
React Native基于JavaScript,这使得它比Java更容易学习/调试, Objective-C, or Swift. (这使得它成为快速启动qr码读取应用程序的一个很好的候选程序.) However, 为了尽量减少错误和提高性能,建议至少了解一种严格的语言.
由于跨平台兼容性,React Native是面向未来的, native functionality, instant live updates, and its gentle learning curve. 这使得RNCamera成为构建健壮的qr码读取应用程序的好选择,因为它可以帮助您通过一些简单的功能与本机操作系统进行通信.
Yes. React Native允许快速迭代,而无需等待长时间的构建. Built correctly, React Native Camera应用可以很容易地扩展,并且跨平台运行良好.
React Native Camera (RNCamera)是在React Native应用中实现相机功能的必备组件. 您可以围绕这些功能构建应用程序,而无需陷入本机代码的麻烦.
曾创建多家初创公司,并与微软合作, 巴萨姆擅长于高度可扩展, 全栈JavaScript应用程序.
世界级的文章,每周发一次.
世界级的文章,每周发一次.
Join the Toptal® community.