那些年我们踩过的坑之——RN扫码

3c6d55fbb2fb43163a6a970228a4462309f7d355.jpg

简单说一下事情的起因，随着条形码被发明之后，很快人们就发现，光条形码已经不够用了，于是，二维码也随之到来。随着二维码的普及，人们发现其有诸多优点，更方便，更安全。尤其杭州这种支付宝全民普及的城市，很多人早餐两块钱的包子都习惯支付宝，因为你卖家也很方便，注册个支付宝，二维码打印出来，随便找个地方一贴，别人只需扫码支付就行。妈妈再也不用担心本来就忙的焦头烂额还要找零问题了。

所以，我们这种有互联网思维的人自然不能落于人后，本着人无我有，人有我优的原则，一个都不能少。完整代码：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：

图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文件。