简单说一下事情的起因,随着条形码被发明之后,很快人们就发现,光条形码已经不够用了,于是,二维码也随之到来。随着二维码的普及,人们发现其有诸多优点,更方便,更安全。尤其杭州这种支付宝全民普及的城市,很多人早餐两块钱的包子都习惯支付宝,因为你卖家也很方便,注册个支付宝,二维码打印出来,随便找个地方一贴,别人只需扫码支付就行。妈妈再也不用担心本来就忙的焦头烂额还要找零问题了。
所以,我们这种有互联网思维的人自然不能落于人后,本着人无我有,人有我优的原则,一个都不能少。完整代码:https://github.com/hong007/ReactNativeNote
然后我就开始了我RN踩坑之旅的新篇章——二维码扫码功能。具体需求是,一个输入框,可以输入也可以扫码(类似添加银行卡卡号)。
感谢全球同性交友网站,RN自带的调用摄像头模块有react-native-camera和react-native-barcodescanner但是有一个小问题,
react-native-camera官方说是针对ios,早期只具有调用摄像头功能,如拍照,摄像等,后来完善可以扫码了,而且android也可以用,但扫码还是不行(可能是我环境没搭好);
react-native-barcodescanner只针对android端,条形码和二维码都可以。
后来有人把二者合并,搞了个react-native-barcode-scanner-universal,其实就是判断了一下应用平台,有兴趣的朋友可以试试。
我一开始采用react-native-camera,结果发现Android只能拍照,有人会问,你丫都知道react-native-camera只 适配ios,你还去适配Android,不是自己找罪受吗?这还是理解文档不到位,因为我看了这两个模块的作者说的,按我的翻译是,0.4版本以后已经支持Android(https://github.com/ideacreation),然后我就一头扎进去了,折腾半天,果然不行。这件事告诉我们——多学门外语是多么重要,而且不要抱有侥幸心理。
然后,我还是老老实实的用react-native-barcodescanner,配置和简单,按官方说明即可,然后也可以用了。
我以为这样就结束了,没想到,这才刚刚开始。。。
首先,扫码返回上一个页面之后,页面底部会有30%左右的黑色区域覆盖,这什么贵鬼,,,好吧,你看不到(" talk is cheap , show me the code")上图先,如下图a:
图b
google了一下(好吧,是度娘),原来是需要给控件加一个背景属性backgroundColor:'rgba(0,0,0,.1)',试了一下,果然管用,效果如下上图b。但是具体原因还没有找到,有人说是摄像头没有释放导致的。
上面说的,只是扫码成功了,但是值怎么传回去呢!首先用的state属性,然后不顶用;又试了本地存储AsyncStorage,即在扫码成功之后,将值存在本地,然后将路由push至上一个页面,上一个页面也取到值了,,,然后我又试了一下再扫一次,打开之后,如下图图c:
wtf!!!怎么就变"黑"了呢???说好的白头偕老呢?然后,又是一番折腾,原来是只push至新场景,扫码页面还是在的,但是不知为什么再次进来之后就黑了,必须重新启动APP才行,也就是第一次扫码有效,再次扫码就出错,跳转之前应该将扫码页面pop掉,果然,pop就可以,不会再"黑"了。
图c
凡事都怕但是,所以,但是,第一次扫码成功之后,将值存在本地,然后第一个页面可以取到,但是第二次扫码,再将扫码页面pop掉,第一个页面没有更新,想了半天肯定是第一个页面没有刷新,然后想了想,在切换场景时通过param传递参数,大家都说可以,可能也的确是可以,只是我一直没搞出来,,,真的是想死的心都有啊!无奈,人不能让尿憋死,方法总是有的嘛!所以,又想了其他办法,发现还是有的。
RN有一个叫做DeviceEventEmitter,
发送数据:
DeviceEventEmitter.emit('自定义名称',发送数据);```
接受数据:
```DeviceEventEmitter.addListener('名称',(events) ={使用数据events});```
在页面跳转时可以监听事件,使用也很简单,首先引入模块,
然后在A页面监听:
DeviceEventEmitter.addListener("changeBarCode",(events)=>{_this.setState({scannText:events})}),
再在B页面添加事件:
```DeviceEventEmitter.emit("changeBarCode",e.data);```
这样整个功能也都实现了,虽然走了很多弯路,但还是走向正途了。
**备注:**安卓二维码扫码之后第二次进入或者手机锁屏或黑屏之后,再次打开二维码扫码出现黑屏情况。
[https://github.com/ideacreation/react-native-barcodescanner/pull/61](https://github.com/ideacreation/react-native-barcodescanner/pull/61)
对比修改CameraManager.java 和CameraPreview.java文件。