作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
在这个反应本地 QR码扫描器教程, 我们创建的应用程序将能够实时读取QR码,并在检测时将其内容呈现在屏幕上. 我们将使用反应本地的CLI快速入门.
(注意:如果您需要帮助设置,您可以随时参考 反应本地入门页-不要忘记点击“反应本地 CLI快速入门”按钮, 因为“Expo CLI快速入门”是在撰写本文时预选的.)
反应本地 是一个有价值的框架,它借用了React的范式和设计原则,以实现闪电般的速度, 跨平台开发时髦的ui. Facebook, Airbnb, Uber等等 他们已经用反应本地开发了最新的应用程序.
反应本地 Camera (RNCamera)是 the 当涉及到在反应本地应用中实现相机功能时. 该组件帮助您通过一些简单的函数与本机操作系统通信,以便您可以使用设备硬件. 您可以围绕这些功能构建应用程序,而无需陷入本机代码的麻烦. RNCamera已经支持:
请注意,RNCamera过去有两种风格:
所以一定要使用RNCamera,这样你就可以不断获得最新的更新.
Note: 反应本地 Camera很大程度上是基于Expo相机模块和 在两者之间来回切换 很简单.
在我们开始反应本地 QR扫描器之前,我们需要安装一些依赖项.
我们的设置至少需要JDK版本1.7(你很可能有),如果你用的是安卓,你需要 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 / 安卓Manifest.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码扫描器. 如果您有任何问题或要求,请随时发表评论!
QR码是一种二维条码,可以被任何电脑摄像头快速读取. 在本教程中, 我们创建了一个基于RNCamera的QR码读取应用程序,它将能够实时读取QR码并在检测时将其内容呈现在屏幕上.
反应本地基于JavaScript,这使得它比Java更容易学习/调试, objective - c, 或迅速. (这使得它成为快速启动qr码读取应用程序的一个很好的候选程序.然而), 为了尽量减少错误和提高性能,建议至少了解一种严格的语言.
由于跨平台兼容性,反应本地是面向未来的, 本机功能, 即时实时更新, 还有它平缓的学习曲线. 这使得RNCamera成为构建健壮的qr码读取应用程序的好选择,因为它可以帮助您通过一些简单的功能与本机操作系统进行通信.
Yes. 反应本地允许快速迭代,而无需等待长时间的构建. 建立正确的, 反应本地 Camera应用可以很容易地扩展,并且跨平台运行良好.
反应本地 Camera (RNCamera)是在反应本地应用中实现相机功能的必备组件. 您可以围绕这些功能构建应用程序,而无需陷入本机代码的麻烦.
世界级的文章,每周发一次.
世界级的文章,每周发一次.