React Native小菜鸡的踩坑排雷记录（5）

一、安卓机型不显示

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

二、ant-design

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

• Modal 阴影框就会显示不了全屏。一些导航上的内容遮盖不了，有时也会出现dialog的抖动问题。
• List和List.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,