<button id="9slfp"><object id="9slfp"></object></button>
<button id="9slfp"><object id="9slfp"><menuitem id="9slfp"></menuitem></object></button>
    <em id="9slfp"></em>
    <button id="9slfp"><acronym id="9slfp"><input id="9slfp"></input></acronym></button>
  • 免費開源的iOS開發學習平臺

    React Native基礎:6-界面布局

    在手機上打開一個App,其呈現出來的所有元素都有大?。▽捀撸?,也有一個位置。由于移動設備的尺寸大小不一,我們不能根據像素點來描述大小和位置。在React Native中描述大小和位置的單位都是"點","點"表示的是與設備像素密度無關的邏輯像素點。

    簡單設置組件的寬高

    假如一個組件的大小是固定不變的,我們可以通過設置組件的style屬性設置。在下方的示例代碼中,我們創建了一個名詞為FixedDimensionsDemo的項目,在界面上添加了三個水平排列的視圖,寬高都設置成100,它們顏色分別被設置成紅色、黃色、綠色。

    import React, { Component } from 'react';
    import {
      AppRegistry,
      View
    } from 'react-native';
    
    export default class FixedDimensionsDemo extends Component {
      render() {
        return (
          <View>
            <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'yellow'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
          </View>
        );
      }
    }
    
    AppRegistry.registerComponent('FixedDimensionsDemo', () => FixedDimensionsDemo);
    

    運行結果如下圖所示。由于現在市面上移動設備的屏幕大小種類繁多,我們不能僅僅通過指定具體的寬高來進行界面的布局,接下來我們需要學習使用Flexbox。

    Flexbox簡介

    Flexbox是一種新的布局方式,這種布局方式是2009年W3C提出的方案,它可以簡便且完整地完成頁面的布局。目前,Flexbox已經得到所有瀏覽器的支持。Flexbox 從本質上就是一個 Box-model 的延伸,我們都知道 Box-model 定義了一個元素的盒模型,Flexbox 則更進一步的去規范了這些盒模型之間彼此的相對關系。使用Flexbox能更容易根據組件間的相對關系進行布局,而不需要通過已知的其他組件大小來進行界面布局。

    flexDirection

    指定組件style中的flexDirection屬性,可以決定布局的主軸,子元素可以應該沿著水平軸(row)方向排列,也可以沿著豎直軸(column)方向排列?默認情況下,子元素是沿豎直軸(column)方向進行排列布局的。

    export default class FixedDimensionsDemo extends Component {
      render() {
        return (
          <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'yellow'}} />
            <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
          </View>
        );
      }
    }
    

    當修改flexDirection的值時,可以改變子元素的排列方向,程序運行后的布局如下圖所示。

    justifyContent

    指定組件style中的justifyContent屬性,可以決定其子元素在主軸上的排列方式。其可選值包括:flex-start、center、flex-end、space-around以及space-between,每個可選值的含義可以參考下方的表格。

    | 值 | 意義 |
    | --- | --- |
    | flex-start | 從開始處進行排列。 |
    | center | 居中進行排列 |
    | flex-end | 從結尾處進行排列。 |
    | space-around | 各行在伸縮容器中平均分布,在兩邊各有一半的空間。 |
    | space-between | 各行在伸縮容器中平均分布,在兩邊沒有空間。 |

    在代碼中,通過修改justifyContent的值可以驗證子元素的各種布局方式。

    alignItems

    指定組件style中的alignItems屬性,可以決定各個子元素沿著次軸的排列方式。所謂次軸,指的是與主軸垂直的軸,例如,若主軸方向為row,則次軸方向為column。其可選值包括如下4個:flex-start、center、flex-end以及stretch,每個可選值的含義可以參考下方的表格。

    | 值 | 意義 |
    | --- | --- |
    | flex-start | 從開始處進行排列。 |
    | center | 居中進行排列 |
    | flex-end | 從結尾處進行排列。 |
    | stretch | 各行將會伸展以占用剩余的空間。 |

    注意:要使stretch選項生效的話,子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例:只有將子元素樣式中的width: 100去掉之后,alignItems: 'stretch'才能生效。

    <View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'space-around',
            alignItems: 'stretch',
    }}>
        <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
        <View style={{height: 100, backgroundColor: 'yellow'}} />
        <View style={{height: 100, backgroundColor: 'green'}} />
    </View>
    

    程序運行后,各子元素的布局與展示方式如下所示。


    精品h动漫无遮挡在线看中文|久久精品国产精品亚洲艾草|久久亚洲春色中文字幕|精品人妻少妇一区二区三区|欧美精品v国产精品v

    <button id="9slfp"><object id="9slfp"></object></button>
    <button id="9slfp"><object id="9slfp"><menuitem id="9slfp"></menuitem></object></button>
    <em id="9slfp"></em>
    <button id="9slfp"><acronym id="9slfp"><input id="9slfp"></input></acronym></button>