Flexbox佈局的重要屬性 – iPhone手機開發 iPhone軟體開發教學課程

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class FlexBoxDemo extends Component {
  render() {
    return (
      
        第一個
        第二個
        第三個
        第四個
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF'
  }
});

AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);

1.改變主軸的方向

// 改變主軸的方向
flexDirection:'row'

從上圖我們可以看出，Text組件默認寬度和高度剛好包裹文字

2.接下來我們改變主軸的對齊方式（這裡主軸就是X方向）

justifyContent:'flex-end' //右對齊

// 設置主軸對齊方式
justifyContent:'center' //居中對齊

justifyContent:'space-between'

justifyContent:'space-around'

3.alignItems定義項目在交叉軸上如何對齊，可以把其想像成側軸（垂直於主軸）的“對齊方式”

要進行這個實驗，我們需要先給幾個Text組件設置高度

第一個
第二個
第三個
第四個

那麼接下來我們設置alignItems看看

// 設置側軸的對齊方式
alignItems:'flex-end'

4個flexItem底部對齊瞭。

alignItems:'center'

相對於父容器居中對齊瞭

另外還有：
baseline ,項目的第一行文字的基線對齊。
stretch（默認值）,如果項目未設置高度或設為auto，將占滿整個容器的高度。
就不一一贅述瞭。

4.flexWrap換行

第四個寬度超出瞭，第一行不夠顯示，我們來看一下代碼：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class FlexBoxDemo extends Component {
  render() {
    return (
      
        第一個
        第二個
        第三個
        第四個
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    // 上邊距
    marginTop:20,
    // 改變主軸的方向
    flexDirection:'row',
    // 設置主軸對齊方式
    justifyContent:'flex-start',
    // 設置側軸的對齊方式
    alignItems:'center',
    // 一行顯示不下,換一行
    flexWrap:'wrap'
  }
});

AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);

元素屬性
我們前面學的幾個都是容器屬性，下面我們來看看元素屬性。

1.flex

第一個
第二個
第三個
第四個

分析：第一個設置瞭flex:1,最後的效果是第二三四個按照自己文字內容的寬度，剩下的寬度全部給瞭第一個。

那麼我們給第一個，第二個都設置flex:1會怎麼樣呢?

第三四個根據自己的文字內容計算寬度後，剩下的屏幕寬度被第一個和第二個平分瞭。

我們修改成這樣看看最後是什麼效果：

第一個
第二個
第三個
第四個


結果是不是和你想的一樣？從代碼我們也可以看出：寬度被分成瞭6份，第二和第三是另外的2倍。

2.alignSelf
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class FlexBoxDemo extends Component {
  render() {
    return (
      
        第一個
        第二個
        第三個
        第四個
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    // 上邊距
    marginTop:20,
    // 改變主軸的方向
    flexDirection:'row',
    // 設置主軸對齊方式
    justifyContent:'flex-start',
    // 設置側軸的對齊方式
    alignItems:'center',
    // 一行顯示不下,換一行
    flexWrap:'wrap'
  }
});

AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);


從上圖我們可以看出：第一個Text遵守瞭它自己的alignSelf:'flex-end' 地對齊瞭，其他3個都是居中對齊。
alignSelf屬性的值有如下幾個：auto | flex-start | flex-end | center | baseline | stretch

四、獲取當前屏幕的寬度、高度、分辨率

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

// 引入系統的Dimensions類庫
var Dimensions = require('Dimensions');

class FlexBoxDemo extends Component {
  render() {
    return (
      
        當前屏幕的width是:{Dimensions.get('window').width}
        當前屏幕的height是:{Dimensions.get('window').height}
        當前屏幕的scale是:{Dimensions.get('window').scale}
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    // 上邊距
    marginTop:20,
    // 設置主軸對齊方式
    justifyContent:'center',
    // 設置側軸的對齊方式
    alignItems:'center'
  }
});

AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);


註意需要引入Dimensions類庫

var Dimensions = require('Dimensions');