首頁  >  文章  >  web前端  >  RN佈局的實例詳解

RN佈局的實例詳解

零下一度
零下一度原創
2017-07-18 17:37:04101863瀏覽

道具和狀態 
我們使用兩個資料來控制一個元件:props和state.props是在父元件中指定,而且一經指定,在被指定的組件的生命週期中則不再改變。對於需要改變的數據,我們需要使用狀態。

一般來說,你需要在建構函數中初始化狀態(譯註:這是ES6的寫法,早期的許多ES5的例子使用的是getInitialState方法來初始化狀態,這一做法會逐漸被淘汰) ,然後在需要修改時呼叫的setState方法。
也就是說要刷新UI就是呼叫的setState方法,改變元件的狀態。

寬度單位和像素密度

react的寬度不支援百分比,設定寬度時不需要帶單位{width: 10}, 那麼10代表的具體寬度是多少呢?

不知道是官網文件不全還是我眼瞎,反正是沒找到,那做一個實驗自己找吧:

RN佈局的實例詳解

預設用的是iPhone6的模擬器結果是:

RN佈局的實例詳解

我們知道iPhone系列的尺寸如下圖:

RN佈局的實例詳解

##可以看到iphone 6的寬度為375pt,對應了上邊的375,由此可見react的單位為pt。 那要如何取得實際的像素尺寸呢? 這對圖片的高清化很重要,如果我的圖片大小為100*100 px. 設定寬度為100 * 100. 那在iphone上的尺寸就是模糊的。 這時候需要的圖片大小應該是 100 * pixelRatio的大小 。

react 提供了PixelRatio 的取得方式

RN佈局的實例詳解

##flex的佈局

  1. ##預設寬度
  2. 我們知道一個div如果不設定寬度,預設的會佔用100%的寬度, 為了驗證100%這個問題, 做三個實驗

RN佈局的實例詳解

根節點上方一個View, 不設定寬度

RN佈局的實例詳解

#固定寬度的元素上設定一個View, 不設定寬度

#flex的元素上放一個View寬度, 不設定寬度

RN佈局的實例詳解

RN佈局的實例詳解結果可以看到flex的元素如果不設定寬度, 都會百分之百的佔滿父容器。

水平垂直居中

css 裡邊經常會做的事情是去講一個文字或圖片水平垂直居中,如果使用過css 的flexbox當然知道使用alignItems 和justifyContent . 那用react-native也來做一下實驗


RN佈局的實例詳解##網格佈局

RN佈局的實例詳解

網格佈局實驗, 網格佈局能夠滿足絕大多數的日常開發需求,所以只要滿足網格佈局的spec,那麼就可以證明react的flex佈局能夠滿足正常開發需求

等分的網格

RN佈局的實例詳解

RN佈局的實例詳解

############ ###左邊固定,右邊固定,中間flex的版面#########################

嵌套的網格
通常網格不是一層的,佈局容器都是一層套一層的, 所以必須驗證在real world下面的網格佈局

RN佈局的實例詳解

RN佈局的實例詳解

RN佈局的實例詳解

好在沒被我玩兒壞,可以看到上圖的巢狀關係也是足夠的複雜的,(我還加了一個ScrollView,然後再嵌套整個結構)嵌套多層的佈局是沒有問題的。

圖片佈局

首先我們得知道圖片有一個stretchMode. 透過Image.resizeMode存取

找出有哪些mode

RN佈局的實例詳解

#嘗試使用這些mode

RN佈局的實例詳解

RN佈局的實例詳解

100px 高度, 可以看到圖片適應100高度和全螢幕寬度,背景居中適應未拉伸但是被截斷也就是cover。

RN佈局的實例詳解

RN佈局的實例詳解

contain 模式容器完全容納圖片,圖片自適應寬高

RN佈局的實例詳解

RN佈局的實例詳解

##cover模式同100px高度模式

RN佈局的實例詳解

1RN佈局的實例詳解

#stretch模式圖片被拉伸適應畫面

RN佈局的實例詳解

1RN佈局的實例詳解

隨便試驗了一下, 發現高度設定到父容器,圖片flex的時候也會等同於cover模式

絕對定位和相對定位

RN佈局的實例詳解

1RN佈局的實例詳解

#和css的標準不同的是, 元素容器不用設定position:'absolute|relative' .

RN佈局的實例詳解

1RN佈局的實例詳解

#相對定位的可以看到很容易的配合margin做到了。 (我還擔心不能配合margin,所以測試了一下:-:)

padding和margin

我們知道在css中區分inline元素和block元素,既然react-native實作了一個超級小的css subset。那我們就來實驗一下padding和margin在inline和非inline元素上的padding和margin的使用情況。

padding#

RN佈局的實例詳解

RN佈局的實例詳解

在View上設定padding很順利,沒有任何問題, 但如果在inline元素上設定padding, 發現會出現上面的錯誤, paddingTop和paddingBottom都被擠成marginBottom了。 照理說,不應該對Text做padding處理, 但是確實有這樣的問題存在,所以可以將這個問題mark一下。

margin

RN佈局的實例詳解

1RN佈局的實例詳解

#我們知道,對於inline元素,設定margin-left和margin -right有效,top和bottom按理是不會生效的, 但是上圖的結果可以看到,實際上是生效了的。所以現在給我的感覺是Text元素更應該理解為一個無法設定padding的block。

算了不要猜了, 我們看看官方文件怎麼說Text

RN佈局的實例詳解

#也就是如果Text元素在Text裡邊,可以考慮為inline, 如果單獨在View裡邊,那就是Block。

下面會專門研究一下文字相關的佈局

文字元素

首先我們得考慮對於Text元素我們希望有哪些功能或想驗證哪些功能:

  1. 文字是否能自動換行?

  2. overflow ellipse?

  3. 是否能對部分文字設定樣式,類似span等標籤

#先看看文字有哪些支援的style屬性

RN佈局的實例詳解

實驗1, 2,3

RN佈局的實例詳解

1RN佈局的實例詳解

##從結果來看1,2,3得到驗證。 但不知道各位有沒有發現問題, 為什麼底部空出了這麼多空間, 沒有設定高度啊。 我去除numberOfLines={5} 這行程式碼,效果如下:

1RN佈局的實例詳解

所以實際上, 那段空間是文字撐開的, 但是文字被numberOfLines={5}截取了,但是剩餘的空間還在。 我猜這應該是個bug。

其實官方文件裡邊把numberOfLines={5}這句放到的是長文本的Text元素上的,也就是子Text上的。 實際結果是不生效。 這應該又是一個bug。

Text元素的子Text元素的具體實現是怎樣的, 感覺這貨會有很多bug, 看官文

RN佈局的實例詳解

Behind the scenes, this is going to be converted to a flat 

NSAttributedString that contains the following information

RN佈局的實例詳解

#好吧, 那對於numberOfLines={5} 放在子Text元素上的那種bug倒是可以解釋了。

Text的樣式繼承

實際上React-native裡邊是沒有樣式繼承這種說法的, 但是對於Text元素裡邊的Text元素,上面的例子可以看出存在繼承。 那既然有繼承,問題就來了!

到底是繼承的最外層的Text的值呢,還是繼承父親Text的值呢?

RN佈局的實例詳解

1RN佈局的實例詳解

結果可見是直接繼承父親Text的。

總結

  1. #react 寬度基於pt為單位, 可以透過Dimensions 來取得寬高,PixelRatio 取得密度,如果想使用百分比,可以透過取得螢幕寬度手動計算。

  2. 基於flex的佈局

    1. #view預設寬度為100%

    2. ##水平居中用alignItems, 垂直居中用justifyContent

    3. 基於flex能夠實現現有的網格系統需求,且網格能夠各種嵌套無bug

  3. 圖片佈局

    1. 透過Image.resizeMode來適配圖片佈局,包括contain, cover, stretch

    2. #預設不設定模式等於cover模式

    3. contain模式自適應寬高,給出高度值即可

    4. cover鋪滿容器,但會做截取

    5. stretch鋪滿容器,拉伸

  4. 定位

    ##定位相對於父元素,父元素不用設定position也行
  5. padding 設定在Text元素上的時候會存在bug。所有padding變成了marginBottom
    1. 文字元素
    2. 文字必須放在Text元素裡邊

    Text元素可以相互嵌套,且存在樣式繼承關係
######numberOfLines 需要放在最外層的Text元素上,且雖然截取了文字但是還是會佔用空間###############

以上是RN佈局的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn