react-native入門(四)----flexbox佈局

寬高 因爲全部的控件都是以堆積木的方式從低處往高處走，因此下面從上往下遞增的木堆

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}
複製代碼

position:

能夠取值relative(默認)相對佈局,absolute絕對佈局(也是相對於父視圖)

絕對佈局位置調整有top，bottom,left,right來佈局

flex彈性寬高

在組件樣式中使用flex可使其在可利用的空間中動態地擴張或收縮。通常而言咱們會使用flex:1指定某個組件擴張以撐滿全部剩餘的空間。若是有多個並列的子組件使用了flex:1，則這些子組件會平分父容器中剩餘的空間。若是這些並列的子組件的flex值不同，則誰的值更大，誰佔據剩餘空間的比例就更大（即佔據剩餘空間的比等於並列組件間flex值的比）。

注意分割父試圖剩餘空間，父試圖若是沒有規定大小，那麼子視圖設置flex也沒法分割，分割法根據佈局來走，默認爲豎直方向

flexDirection

在組件的style中指定flexDirection能夠決定佈局的主軸

column豎直軸,默認值是豎直軸umn)方向。

row水平軸 : 子元素是橫向從左日後方向排列;row-reverse也是水平方向子元素從右往左方向排列,

flexWrap屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

它可能取三個值

flexWrap:'nowrap'（默認）：不換行。

flexWrap:'wrap'：換行，第一行在上方，要和alignItems:'flex-start'一塊兒使用(默認是這個屬性)，在必要的時候拆行，若是內部元素(子組件)設置好了大小，排列滿了內部視圖會自動換行

row-reverse本身應該能猜到了吧，就不上圖了，就是居右了

Justify Content

在組件的 style 中指定justifyContent能夠決定其子元素沿着主軸的排列方式。子元素是應該靠近主軸的起始端仍是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有（前面三個挨着，後面的通常不挨着）：

下面的主要以flexDirection: row爲例，column的看第一個圖對比下column和row就明白了哈

flex-start(居前顯示，多個在左邊挨着，默認)、

center(子元素居中，多個會在中間挨着)、

flex-end(居後顯示，多個會在右邊挨着)、

後三個須要元素大於等於兩個纔有效果

space-between(兩邊元素貼邊，中間間距平分剩餘空間)、

space-around(兩邊元素不貼邊、兩邊元素距離邊爲r，元素之間內部間距2r)

space-evenly(兩邊元素不貼邊， 子元素與邊緣之間間隙都同樣)。

Align Items

在組件的 style 中指定alignItems能夠決定其子元素沿着次軸（與主軸垂直的軸，好比若主軸方向爲row，則次軸方向爲column）的排列方式。子元素是應該靠近次軸的起始端仍是末尾段分佈呢？亦或應該均勻分佈？對應的這些可選項有：flex-start、center、flex-end以及stretch(填充完畢次軸方向)。 這個以flexDirection:column爲例 flex-start:

flex-end：

center:

stretch(填充次軸方向，主軸是豎着（垂直）的，那麼水平方向填充滿):

width標識橫向長度，height標識縱向方向長度，不受方向佈局約束

alignSelf

有五種類型:auto,flex-start,flex-end,center,stretch,用途能夠忽略父組件中的alignItems中的取值，按照設置的alignSelf屬性來走

默認爲auto，按照父組件來，

大方向上經常使用的就這幾個了，剩下的style屬性列出來一些吧,flexbox經常使用的邊距相關就是margin和padding, left，right這種事絕對佈局使用的

基本上有一個屬性，就有和他相對的試試吧，剩下的能夠百度查找一下

margin開頭的外邊距 padding開頭的內邊距

marginHorizontal marginVertical paddingVertical paddingHorizontal width: 10px width: 100% borderColor: white borderBottom: 2px solid marginLeft marginBottom borderRadius: 10px borderWidth: 2px position: 'absolute' left: right: justifyContent: alignItems alignSelf display: flex flexDirection: column paddingBottom: fontSize: 20px fontWeight: 'bold' padding: 10px flex-wrap: 'wrap' color: backgoundColor:

ps：實際使用像素不是px哦，通常都是百分比佈局

附上點代碼:（實際使用一般是px2dp(像素)）

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window')/height;
const scale = 2;//屏幕像素比
const w = 750/scale;
const h = 1334/scale;//高度通常不推薦
設置字體的時候能夠按照上面的比例來調整，例如
export default function px2dp（size） {
    let scaleWidth = screenW / w;
    size = Math.round((size*scaleWidth + 0.5)); //像素四捨五入，最小爲0.5px
    return size/scale;
}
複製代碼