[TOC]

概述

文章参考：https://segmentfault.com/a/1190000016149881
文章参考：https://shenbao.github.io/ishehui/html/RN%20%E5%9F%BA%E7%A1%80/React%20Native%20%E5%B8%83%E5%B1%80%E4%B9%8BFlexBox.html

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

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

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

Flex Direction

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

代码的学习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
 * 设置子元素沿着主轴的排列方式：
 * 1、flex-start 
 * 2、center   在主轴方向居中显示
 * 3、flex-end
 * 4、space-around
 * 5、space-between   表示在主轴方向均匀分布
 * 6、space-evenly
 */
const styles = StyleSheet.create({
  container: {
    // 布局方向，决定主轴的方向，默认值是column，即纵向布局
    //flexDirection: 'row',   // 设置控件排列方向，为按行排列。也就是横向排列
    flexDirection: 'column',   // 设置控件排列方向，为按列排列。也就是竖向排列
    // flex 布局权重
    // 1:0：flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间
    flex: 1,
    
    // flex-start  表示在靠近主轴的起始段
    justifyContent: 'flex-start',

    // flex-end  表示在靠近主轴的末尾段
    justifyContent: 'flex-end',

    // 在主轴方向居中显示
    justifyContent: 'center',

    // Justify Content  表示在主轴方向等间距对齐,与父容器间距为一半
    // child在主轴方向相邻child等间距对齐，首尾child与父容器的间距相等且为相邻child间距的一半
    justifyContent: 'space-around',

    // Justify Content  表示在主轴方向等间距对齐,与父容器间距对齐
    // child在主轴方向相邻child等间距对齐，首尾child与父容器对齐
    justifyContent: 'space-between',


    // Justify Content  表示在主轴方向均匀分布
    // child在主轴方向均匀分布。相邻间距与首尾间距相等
    justifyContent: 'space-evenly',

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

    //注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。
    // 以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。
    //child为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
    alignItems: 'stretch',   // 沿次轴方向拉伸对齐次轴

    // alignItems: 'baseline',  //有文本存在时，child在副轴方向基于第一个文本基线对齐


    //backgroundColor: '#C5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FE3333',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

position布局

image

position:’relative’

相对布局。这个和html的position有很大的不同，他的相对布局不是相对于父容器，而是相对于兄弟节点。

position:’absolute’

绝对布局。这个是相对于父容器进行据对布局。绝对布局是脱离文档流的，不过奇怪的是依旧在文档层次结构里面，这个和html的position也很大不一样。另外还有一个和html不一样的是，html中position:absolute要求父容器的position必须是absolute或者relative，如果第一层父容器position不是absolute或者relative，在html会依次向上递归查询直到找到为止，然后居于找到的父容器绝对定位。

position 示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 * Created by GXZ on 16/6/27.
 */
import React,{Component} from 'react';
import {
    Text,
    View,
    ScrollView
} from 'react-native';

export default class PositionExample extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <ScrollView>
                <View style={{flex:1}}>
                    <Text>FlexBox布局</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2]}/>
                        <View style={[styles.box3]}/>
                    </View>
                    <Text>position=relative,top:20</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2,{position:'relative',top:20}]}></View>
                        <View style={styles.box3}/>
                    </View>
                    <Text>position=absolute,top:20</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2,{position:'absolute',top:20}]}></View>
                        <View style={styles.box3}/>
                    </View>
                </View>
            </ScrollView>
        );
    }
}

const styles = {
    container: {
        height: 180,
        backgroundColor: '#CCCCCC',
        marginBottom: 10,
    },
    box1: {
        width: 50,
        height: 50,
        backgroundColor: '#FF0000'
    },
    box2: {
        width: 50,
        height: 50,
        backgroundColor: '#00FF00'
    },
    box3: {
        width: 50,
        height: 50,
        backgroundColor: '#0000FF'
    }
};