基础篇_使用Flexbox布局

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

• 一般来说，使用 flexDirection , alignItems 和 justifyContent
  三个样式属性就已经能满足大多数布局需求。

direction [dɪˈ rek ʃn] 方向；指导；趋势
align [ə' laɪn] 排列；排成一行
justify ['dʒʌ stə' fai] 整理版面
content [kən' tent] 内容，容量

译注：这里有一份简易布局图解，可以给你一个大概的印象。

Flex Direction

column ['kɒləm] 纵队，列
row [rəʊ] 行，排
reverse [rɪ'vɜːs] 相反

React Native 中的 Flexbox 的工作原理和 web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection 的默认值是 column 而不是row，而 flex 也只能指定一个数字值。

在组件的 style 中指定 flexDirection 可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

代码如下

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

class MyApp extends Component {

    render() {
        return (
                // 尝试把 `flexDirection` 改为`column`
                <View style={{flex: 1,flexDirection:'row'}}>
                <View style={{flex:1,backgroundColor:'powderblue'}} />
                <View style={{flex:1,backgroundColor:'skyblue'}} />
                <View style= {{flex:3,backgroundColor:'steelblue'}} />
                </View>
               );
    }
}
AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：

render() {
        return (
                // 尝试把 `flexDirection` 改为`column`
                <View style={{flex: 1,flexDirection:'row'}}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                </View>
 
               );
    }

效果如下：

---

Justify Content

在组件的 style 中指定 justifyContent 可以决定其子元素沿着主轴的排列方式。
子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

代码如下：

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

class MyApp extends Component {

    render() {
        return (
                // 尝试把 `flexDirection` 改为`column`
                <View style={{
                flex:1,
                flexDirection:'column',
                justifyContent:'space-between'
                }}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                </View>
               );
    }   
}
AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：

---

代码如下：

render() {
        return (
                <View style={{
                flex:1,
                flexDirection:'column',
                justifyContent:'space-around' // 改为'space-around' 
                }}>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                </View>
               );
    }

效果如下：

---

Align Items

在组件的style中指定 alignItems，可以决定其子元素沿着 次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？
对应的这些可选项有：flex-start、center、flex-end 以及 stretch。

stretch [stretʃ] 伸展,张开；
注意：要使 stretch 选项生效的话，子元素在次轴方向上不能有固定的尺寸。

以下面的代码为例：
只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

代码如下：

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

class MyApp extends Component {

    render() {
        return (
                <View style={{
                flex:1,
                flexDirection:'column',
                justifyContent:'center',
                alignItems: 'center'
                }}>
                
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                </View>
               );
    }
}
AppRegistry.registerComponent('MyApp', () => MyApp);

效果如下：

---

代码如下：

class MyApp extends Component {

    render() {
        return (
                // 尝试把 `flexDirection` 改为`column`
                <View style={{
                flex:1,
                flexDirection:'column',
                justifyContent:'center',
                alignItems: 'stretch'
                }}>
                
                <View style={{ height: 50, backgroundColor: 'powderblue'}} />
                <View style={{ height: 50, backgroundColor: 'skyblue'}} />
                <View style={{ height: 50, backgroundColor: 'steelblue'}} />
                </View>
               );
    }
}

效果如下：

---

以下是另外的布局方式

---