【react-native】持续踩坑总结

　　陆陆续续的已经接触了RN快3个月，总体的感觉。。。感受在调试兼容andorid问题的时候就像回到了IE时代。

　　原本想按本身踩坑的路径持续更新一些记录，可是，现实是坑太多，仍是统一写一篇汇总一下吧（鉴于笔者的接触时间并不长，因此，难免理解不对之处，还望指正)：

　　一、overflow:hidden; 这个属性前端工程师应该都很熟悉，fb的团队在rn中也支持了这个属性，可是虽然RN实现了这个属性，可是它的支持却并不太好，直到笔者最近使用的RN 0.53.3的版本，这个bug依然存在。。致使android上并不能设置overflow的属性，始终为hidden；如何解决呢?能够参考第三点的方法。

　　二、border: 1px dashed #000; 这是一个设置边框的属性，与咱们经常使用的设置“实线（也就是border-style:solid）”不一样，它是设置为虚线，可是这货在android上压根就不支持。。而在ios上也不能支持对单边的设置，必须四周都要保证一样的border-style border-color，才可以正常显示；

　　如何解决这种问题呢？android笔者的团队最终使用图片来hack了，而ios须要模拟单边的dashed bodrder则能够利用它自己已经有的能力，绘制一个height:1的容器，设置它的border，再设置它的overflow:hidden，则正好实现了单像素的边框。

　　三、zIndex: number; 这个也是一个很熟悉的属性了，不过在rn中，它的实现和web又不太同样，可是实现上有些相似：

<>
    <Header />
    <ParentComponent>
          <ComponentA />
          <ComponentB />        
    </ParentComponent>
    <Footer />
</>    

　　好比以上这个代码片断，在css中咱们能够经过设置postition来强制提升Component*的层级，可是在rn中，层级是由嵌套结构决定的，也就是说若是ParentComponent只有100*100的显示区域，那么它的子组件A、B是没法超出这个显示区域显示的，固然可使用rn提供的组件modal，不过这个组件笔者在android 8.0又有一个奇怪的bug，并且官方目前还没修复；另一种是经常使用的方式是本身基于RN提供的DeviceEventEmitter去驱动早就设置好的一个高层级组件容器去显示，形如：

<>
    <Header />
    <ParentComponent>
          <ComponentA />
          <ComponentB />        
    </ParentComponent>
    <Footer />
    <MyModal />
</>    

　　把须要跨层显示的元素挂载到MyModal上，经过它在物理层上的原本的高层级来实现。

　　四、console；console应该是前端同窗用得特别多的对象，因此fb也贴心的在rn中实现了，对调试确实有蛮大的帮助，可是这个东西，自己的性能并很差（其中不少概念就不展开了，笔者也没有彻底摸清），因此官方建议是在上线的时候移除console，不过。。彷佛官方提供的babel-no-console plugin并不能很好的移除全部console。。。因而一般会用一个比较原始的方式:　　

for(let key in console){
    console[key] = ()=>{};
}

　　五、TouchableXXX;RN中为了方便响应用户事件（如点击）的交互，产生了一些新的组件TouchableHighlight、TouchableNativeFeedback、TouchableOpacity等，它们会封装一些默认的交互，相似web端的active效果，不过实测发现TouchableHighlight在响应事件的同时在android上存在着会把处于padding逾期的元素隐藏的bug；笔者的解决方法是使用TouchableOpacity来代替，在直观效果上其实二者区别不大，除非是很特殊的场景，通常仍是能够应用的。

　　

　　暂时先写到这里吧，由于每天都在踩，后面再持续更新。