<p id="qitwt"></p>
      1. <object id="qitwt"><strong id="qitwt"></strong></object>
        <p id="qitwt"></p>
        <li id="qitwt"></li>
        <p id="qitwt"><del id="qitwt"><xmp id="qitwt"></xmp></del></p>
        <p id="qitwt"><label id="qitwt"></label></p>
      2. <acronym id="qitwt"></acronym>
        <p id="qitwt"></p>
        免費開源的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>
        

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


        青青草国产成人久久_jizzjizz日本护士高清_亚洲 另类 国产 另类_99久久免费精品色老
        <p id="qitwt"></p>
          1. <object id="qitwt"><strong id="qitwt"></strong></object>
            <p id="qitwt"></p>
            <li id="qitwt"></li>
            <p id="qitwt"><del id="qitwt"><xmp id="qitwt"></xmp></del></p>
            <p id="qitwt"><label id="qitwt"></label></p>
          2. <acronym id="qitwt"></acronym>
            <p id="qitwt"></p>