react-native-qr-scanner icon indicating copy to clipboard operation
react-native-qr-scanner copied to clipboard

扫码时间过长的原因分析

Open zhenizhui opened this issue 7 years ago • 1 comments

在使用这个库的时候,发现有一个问题,当屏幕范围内有多个二维码的时候,会导致解析不出来二维码的结果。

然后我就和 @shifeng1993 进行邮件交流 😃 ,最终定位出了问题,也得到一个暂时可行的解决方案。

二维码示例

pic

原因分析

如果屏幕范围内只有一个二维码,那么这个库能完美解决问题。但是,存在多个二维码的时候,就有问题了。

react-native-camera识别二维码的顺序是先识别第一个二维码,在识别第二个二维码,再限制了区域,所以你对准第二个二维码在框内的时候,实际react-native-camera得到是第一个二维码的信息,又因为你第一个二维码不在区域内。所以相应的解析函数没有被调用。有兴趣的同学可以查看调用解析二维码函数的部分代码

一个可行的解决方案

<View style={{ width: 200, height: 200, marginTop: 100, marginLeft: 100}}>
  <Camera />
</View>

通过包多一层View,并对这个View做偏移和大小的限制。这样相机组件就不会在整个屏幕范围内识别二维码了,这样,扫码的功能就没问题了。但是,UI样式还要下功夫去调试,毕竟目前这个实现方式和原生的扫码组件有交互上的差别。

zhenizhui avatar Jun 05 '18 07:06 zhenizhui

谢谢你提出的解决方案,我会在后续版本中加入外层view限制。

shifeng1993 avatar Jun 07 '18 02:06 shifeng1993