Question

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

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

周围有什么办法吗？如果还有其他一些库对我有用。

Answer 1

好吧，我花了一整天，但我终于找到了一个有效的图书馆。如果有人找到他们的方式，并正在寻找一个条形码扫描仪反应本机，适用于Android ...我来这里是为了帮助。

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

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

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

npm install --save react-native-barcodescanner

rnpm link react-native-barcodescanner

此时我同步gradle并重新启动Android工作室的应用程序...不确定是否需要（有时rnpm链接会忘记新行字符...如果您有关于单词的错误消息，则包括它因为这...只是在你的setting.gradle文件中找到它，在单词include之前添加一个新行

现在可以使用了。

导入它：

import BarcodeScanner from 'react-native-barcodescanner';

然后在渲染功能的返回声明中使用它：

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

如果您需要更多信息，请查看该链接。我希望这有助于某些人避免在我无法工作的旧图书馆之后经历图书馆的折磨。

快乐的编码！：）

Answer 2

我建议使用React Native Community的React Native Camera。它维护得很好，您只需传递一个回调道具即可接收输出：

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

在相机视图中检测到条形码时，将调用您的回调。 From the docs：

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

Answer 3

有一个本机库，用于扫描具有突出显示扫描区域和带有上下移动动画的扫描栏的QR代码。

您可以使用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-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

Answer 4

js.coach是寻找反应原生插件的好地方

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

https://github.com/leofidjeland/react-native-barcode

Answer 5

刚刚找到通用代码扫描程序 - 结合android和ios： https://www.npmjs.com/package/react-native-barcode-scanner-universal

尝试在Android上工作得很好。

Answer 6

Expo开箱即用提供了BarCodeScanner组件（已预安装在托管应用中）。

它就像一种魅力，我绝对推荐它。

您可以查看BarCodeScanner是否适用于您的条形码，可以在小吃中尝试：https://snack.expo.io/@documentation/barcodescanner-example

条形码扫描使用反应原生

6 个答案: