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

3c6d55fbb2fb43163a6a970228a4462309f7d355.jpg

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

所以,我们这种有互联网思维的人自然不能落于人后,本着人无我有,人有我优的原则,一个都不能少。完整代码:https://github.com/hong007/ReactNativeNote
然后我就开始了我RN踩坑之旅的新篇章——二维码扫码功能。具体需求是,一个输入框,可以输入也可以扫码(类似添加银行卡卡号)。

感谢全球同性交友网站,RN自带的调用摄像头模块有react-native-camerareact-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文件。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容