陸陸續續的已經接觸了RN快3個月，整體的感受。。。感覺在調試兼容andorid問題的時候就像回到了IE時代。
本來想按自己踩坑的路徑持續更新一些記錄，但是，現實是坑太多，還是統一寫一篇匯總一下吧（鑒於筆者的接觸時間並不長，所以，不免理解不對之處，還望指正)：
1、overflow:hidden; 這個屬性前端工程師應該都很熟悉，fb的團隊在rn中也支持了這個屬性，但是雖然RN實現了這個屬性，但是它的支持卻並不太好，直到筆者最近使用的RN 0.53.3的版本，這個bug依然存在。。導致android上並不能設置overflow的屬性，始終為hidden；如何解決呢?可以參考第三點的方法。
2、border: 1px dashed #000; 這是一個設置邊框的屬性，與我們常用的設置“實線（也就是border-style:solid）”不同，它是設置為虛線，但是這貨在android上壓根就不支持。。而在ios上也不能支持對單邊的設置，必須四周都要保證同樣的border-style border-color，才能夠正常顯示；
如何解決這種問題呢？android筆者的團隊最終使用圖片來hack了，而ios需要模擬單邊的dashed bodrder則可以利用它本身已經有的能力，繪制一個height:1的容器，設置它的border，再設置它的overflow:hidden，則正好實現了單像素的邊框。
3、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上，通過它在物理層上的本來的高層級來實現。
4、console；console應該是前端同學用得特別多的對象，所以fb也貼心的在rn中實現了，對調試確實有蠻大的幫助，但是這個東西，本身的性能並不好（其中很多概念就不展開了，筆者也沒有完全摸清），所以官方建議是在上線的時候移除console，不過。。似乎官方提供的babel-no-console plugin並不能很好的移除所有console。。。於是通常會用一個比較原始的方式:
for(let key in console){ console[key] = ()=>{}; }
5、TouchableXXX;RN中為了方便響應用戶事件（如點擊）的交互，產生了一些新的組件TouchableHighlight、TouchableNativeFeedback、TouchableOpacity等，它們會封裝一些默認的交互，類似web端的active效果，不過實測發現TouchableHighlight在響應事件的同時在android上存在着會把處於padding逾期的元素隱藏的bug；筆者的解決方法是使用TouchableOpacity來代替，在直觀效果上其實兩者區別不大，除非是很特殊的場景，一般還是可以應用的。
暫時先寫到這里吧，因為天天都在踩，后面再持續更新。