React Native小菜鸡的踩坑排雷记录(5)

一、安卓机型不显示

这一期我们团队把安卓也加进来,一起用RN实现顶层的业务代码,这对安卓同学来说,简直是一个好消息,只用做下底层的桥接。但是,对于我来说,就有点。。咳咳~~,说啥呢,都是可以兼容的~。“有条件,我们要上。没有条件,我们创造条件也要上!”
前期,都是拿着ios模拟器,适配下iphoneX和普屏的iphone。实现还是好办的。所有业务CASE跑通后,测了下安卓效果。
“咦?怎么很多内容都不显示了。”心里一阵嘀咕,看了下数据返回,有的。我勒个擦,冷静~。
一通排查后,发现是安卓默认字体颜色是白色,所以一些白底黑字(#000000)就显示不出来了。
还有一些其他的样式(lineHeight等,有些会把字体内容截断,flexWrap有些旧机型旧版本也不兼容等等),要做Platform的判断,做对应的样式。对于一些太远古时代的机型,可以放弃兼容了。成本太高~~(我们测试机居然有一个安卓5的机子,把人整死~。~)

二、ant-design

做了这几期需求,感觉ant-design的RN版,有些组件不是很好用,选了以后,最后还是要重新找组件或者自己手撸。有点难受~。
好在现在的生态比较成熟了,很多组件以及优化后的高效版都可以搜到。(要肯去发现,肯去找。哈哈,一切都要精益求精,我们团队都是一像素也不放过的,真的让我有点不太适应。毕竟原来的app项目都是给公司内部员工用的,所以要求没有那么高。。respect!!)

  • Modal 阴影框就会显示不了全屏。一些导航上的内容遮盖不了,有时也会出现dialog的抖动问题。
  • ListList.Item的onpress事件不是很灵敏,感觉每次都要点击两次,才能触发。
  • Toast 用起来也不是很方便。不能向Web上的组件一样,随时使用。
  • 还有些ant-design的集体问题,还是样式太收敛了。这个前面一篇也有讲到。不是很方便,且层级过多。

解决方法,就是换组件或者手撸啦~~

  • react-native-modal解决问题。一些动画取消的话,可以将时间设置为1.
  • List.Item直接用Touchable系列组件就行。一般像List这样的表单,都可以用TouchaleHighLight来解决,上代码:
// callback 点击事件   imgNode Item上的图标  
// title Item的label   isLast  是不是最后一个元素,来判断是否要border
renderItem = (callback, imgNode, title, isLast 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值