從React-Native坑中爬出，我記下了這些

吐槽

若是React-Native是我的，我估計已經想要打死他了。。。 

上一篇文章

• 當React開發者初次走進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