使用react native进行条形码扫描

Question

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

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

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

Answer 1

有一个react原生库用于扫描二维码，通过上下移动的动画扫描条高亮显示扫描区域。

您可以使用isShowScanBar属性来显示扫描条，或者通过向该属性传递false来禁用。

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本机相机库，因为该库依赖于它。

只需在项目的根目录下运行此命令即可

然后运行这个link命令react-本机链接react-nate-cam

使用从“react native qr scanner”导入：Import{QRscanner}

 <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

Answer 2

我建议使用React Native社区的React Native摄像头。它维护得很好，您只需传递回调道具即可接收输出：

<代码>

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

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

Answer 3

好吧，我花了一整天，但我终于找到了一个有效的库。如果有人在这里找到了他们的方式，并且正在寻找一个在android上工作的反应原生条码扫描器......我是来帮忙的。

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

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

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

npm安装-保存反应本机-barcodesanner

rnpm链路反应本机条形码扫描仪

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

现在可以使用了。

导入它：

import BarcodeScanner from 'react-native-barcodescanner';

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

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

如果你需要更多信息，请查看该链接。我希望这能帮助一些人避免我在一个又一个不起作用的旧图书馆里忍受的折磨。

快乐编码！：）