吐槽
如果React-Native是個人，我估計已經想要打死他了。。。
上一篇文章
前言
最近因為業務需要，做了一些關於React-Native方面的開發，對一些自己遇到的問題做了記錄。總共 21 條要點記錄，承接於上一篇文章
本文講的很多問題，不一定是對的，但確實是自己覺得可以引起一定的注意。因為也是剛開始了解，很多都不確定是否是最佳實踐，還請各位前輩多多指教。
正文
1.對於背景，可以使用<backgroundImage>組件
2.字符串不寫在<Text>組件里面會報錯的，比如寫在View組件下面的話
3.Web中溢出時候有內部滾動條的div，在RN中則是對應使用ScrollView組件
4.Web中我們使用click處理點擊事件，在RN中要用Touchable組件的onPress事件
5.對於導航，我們可以使用React-Navigation。
其中導航我們有兩種寫法，一種是單純寫成React的props函數調用的風格，另外一種是寫成Redux的風格，就是通過dispatch/action的風格，使用Redux風格，是因為少部分場景可能會用到全局導航狀態共享的需求，對於多數簡單的需求，我覺得寫成React的風格就好了，因為簡單易用
6.對於切換類tabs，我們也許可以試試使用react-native-scrollable-tab-view
但有一點非常遺憾：這個組件對下划線的支持程度仍然無法滿足普遍的業務需求 —— 自定義長度的居中下划線的切換
一般情況下，設計師給我們的下划線不是占滿滿一個tab的，而是只占一個tab的一部分長度，比如60%，同時還要實現居中，這時這個開源的tab模塊就讓我感到頭疼了。
我也想過，react-native-scrollable-tab-view中，有一個叫做tabBarUnderlineStyle可以定義下划線的樣式，我們也許可以在這里實現長度為單tab60%的下划線居中的效果。設置長度百分比，配合marginLeft就可以了。
可是，這樣的話，我們切換的時候，平滑過渡的動畫效果怎么實現？模塊沒有提供可以切入的相關props啊，實在沒有辦法，我最終還是無奈得自己定義了一個。當然了，模塊其實提供了另外一個方法，可以切入tab渲染，那就是renderTabBar這個props,但我仔細思考一番后，發現：這好像和我自己寫一個工作量上沒區別 emmmm。
如果大家有比較好的方案，還請不吝提供一下，謝謝。
7.borderRadius不能用百分比了，要用數值
8. flex放心用吧！不用再畏手畏腳了，因為這里是移動端
9.如果要獲取某個組件在屏幕中的位置組，可以利用組件布局完畢時觸發的onLayout方法，可以在這里獲取組件的位置，但令人遺憾的是，這個方法是異步的，異步的特征可能會與你的需求沖突，如果每個組件的物理距離是確定的，而非靈活變化的話，是可以寫死的 。
10.RN使用動畫的時候，組件一定要使用專門的動畫組件Animated.View, 不然沒有動畫效果，切記。
12.除了動畫和最近新增的CSS特性外，我們原本在web中能用的CSS屬性大部分還是能用的。當然實現肯定和我們理解的“CSS”不一樣了，下面是部分列表
Flex Width htight margin Padding textAlign Overflow fontWeight Position
13.動畫類的”CSS"是全體不能用了，你就忘了它們吧
14.單純依靠Image的width:100%或者width: Dimensions.get(‘window’).width，可能無法實現圖片匹配全屏寬度，還需要設置resizeMode: ‘contain’
15. 接上14，除此你會發現，圖片的寬度變小了，但是外層的image控件的高度可能還是沒有變化，因為它是開始就定死的，不是動態變化的，不是”auto”的，所以還要另外結合圖片比例和屏幕寬度，進行設置
16.組件設置為position: absolute后，它的index是默認比其他組件要大的，可能會遮蓋其他組件，這點要注意
17. Text可以設置border-radius，但是它的圓角不會切割掉背景。（就是說，雖然會出現border,border也是圓的，但是border外部的）所以，關鍵的時候還是要用View組件去設置文字外部背景圓角
單純用Text去切割圓角背景，是切不出來的，boder確實會有圓角，但是無法切割邊框
18.似乎RN並不支持boxSizing屬性，按照我們在Web中的理解規則：它默認指定的是類似border-box的行為，也就是width是包含border的
19.承接20,畫圓的時候，borderRadius是width/height的一半，而不是width 減去 borderWidth的一半
20.外層視圖的overflow: hidden可能對內層視圖沒有作用，還是會出現內層視圖超出外層的情況
21.RN 帶背景的Text自適應文字內容寬度的方法實現
在使用RN的文本的時候，遇到了一件比較無語的事情，就是我想寫一個類似“文本標簽”的樣式，就是一段可變長度的文本，然后外面包裹一個長方形的背景，當然是有圓角的那種。然后呢，我發現，直接用<Text>標簽包裹文本的話，Text標簽的背景顏色是會占滿全屏的，用View包裹也同樣出現這種情況
那么，怎么實現這種“帶背景的Text自適應文字內容寬度”呢
實現
方式一：雙重Text法
<Text style={{backgroundColor: 'transparent'}}>
<Text style={{backgroundColor: 'red'}}>sss</Text>
</Text>
// 備注：用這種Text法無法設置padding！border-radius，對於細節豐富的標簽樣式實現會有問題
方式二： flex-align法
<View style={{alignSelf: 'flex-start'}}>
<Text>aaaaaa</Text>
</View>
就能實現類似上面的效果
22.Scroll-View組件滾動時候會回到原位
解決辦法
1.給它定義高度
2.給它加上flex : 1
23.Flatlist的大量坑點
FlatList是RN推薦的滾動列表實現的選擇，但是它卻同樣存在大量坑點
- onEndReached方法在到達底部時會觸發多次，需要使用flag變量規避
- 長列表滾動太快會白屏
- scrollToIndex定位不精准
24.Android和IOS詳解
1.IOS默認是不隱藏溢出的（相當於overflow:visable），Android默認是隱藏溢出的（overflow: hidden），可以使用一個叫做：react-native-view-overflow的npm模塊化解這個問題
2.當zIndex設置負數的時候，在Android和IOS中的層疊順序可能是不一致的
3.在ProgressiveImage組件中的containerStyle中設置border和border-radius的話，在IOS中表現正常，但Android會表現出反常的效果
25.RN不支持position:fixed
對於一些吸頂的效果可以用Animation等方式替代實現 https://www.yzlfxy.com/jiaocheng/JavaScript/325912.html