react-native - 使用本机反应的条码扫描

Question

我正在使用 react-native-camera 为 Android 和 iOS 构建条形码扫描仪。

我可以在 iOS 中扫描条形码，但问题是扫描边界没有视觉效果。而且我希望整个屏幕都能够扫描条形码，而不仅仅是屏幕中间。

有什么办法吗？如果有其他图书馆也适合我。

score 9 · Accepted Answer

好吧，我花了一整天的时间，但我终于找到了一个可以工作的图书馆。如果有人在这里找到自己的方式并正在寻找适用于 android 的 react native 的条码扫描器......我在这里为您提供帮助。

https://github.com/ideacreation/react-native-barcodescanner

第一个如果你没有 rnpm 得到它......它非常有帮助！（npm install -g rnpm）（https://github.com/rnpm/rnpm）

然后在您的项目文件中运行这些命令：

npm install --save react-native-barcodescanner

rnpm 链接 react-native-barcodescanner

在这一点上，我同步了 gradle 并从 android studios 重新运行了该应用程序...不确定是否需要它（有时 rnpm 链接会忘记换行符...如果您有关于单词 include 的错误消息，那是因为这个。 ..只需在您的 setting.gradle 文件中找到它，在单词 include 之前添加一个新行）

现在可以使用了。

导入它：

import BarcodeScanner from 'react-native-barcodescanner';

然后在渲染函数的返回语句中使用它：

<BarcodeScanner
    onBarCodeRead={this._BarCodeRead}
    style={styles.preview}
    torchMode='off'
    cameraType='back'
  />

如果您需要更多信息，请查看该链接。我希望这可以帮助某人避免我在一个不起作用的旧图书馆之后经历图书馆的折磨。

快乐编码！:)

score 2 · Accepted Answer

我推荐使用 React Native 社区的React Native Camera。它维护得很好，您可以简单地传递一个回调道具来接收输出：

<RNCamera onBarCodeRead={this.handleBarCodeRead}></RNCamera>

当在相机视图中检测到条形码时，将调用您的回调。从文档：

事件包含数据（条形码中的数据）和类型（检测到的条形码类型）。

score 1 · Accepted Answer

有一个用于扫描 QR 码的 react-native 库，带有突出显示扫描区域和上下移动的动画扫描栏。

你可以使用isShowScanBarprop 来显示扫描栏，或者通过传递false给这个 prop 来禁用。

Github链接https://github.com/shifeng1993/react-native-qr-scanner#readme

它的npm也在这里https://www.npmjs.com/package/react-native-qr-scanner

它的道具在这里列出https://www.npmjs.com/package/react-native-qr-scanner#qrscanner

首先，安装 react-native-camera 库，因为该库依赖于它。

只需在项目的根目录中运行此命令 npm i react-native-qr-scanner

然后运行这个link命令react-native link react-native-camera && react-native-qr-scanner

使用导入它： import {QRscanner} from 'react-native-qr-scanner';

 <QRscanner onRead={this.onRead}
    cornerBorderColor ='black'
    cornerRadius={40}
    isRepeatScan = {true}
    cornerBorderRadius={40}
    cornerColor ='black'
    scanBarColor='black'
    cornerBorderWidth={10}
    cornerBorderLength={60}
    hintText="Please Align QRCode"
    renderBottomView={this.bottomView} flashMode={this.state.flashMode}
    finderY={50}/>

 onRead = (res) => {
   alert(JSON.stringify(res))
}

它适用于 Android 和 iOS