【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來代替，在直觀效果上其實二者區別不大，除非是很特殊的場景，通常仍是能夠應用的。

　　

　　暫時先寫到這裏吧，由於每天都在踩，後面再持續更新。