從React-Native坑中爬出，我記下了這些
- 2019 年 10 月 8 日
- 筆記
吐槽
如果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>
就能實現類似上面的效果
