ReactNative学习笔记(三)之flexbox

发表于 | 分类于

前言

接上一篇ReactNative学习笔记(二)之常用样式

justifyContent

首先改写App这个类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.item, styles.itemOne]}>
                    <Text style={styles.itemText}>1</Text>
                </View>
                <View style={[styles.item, styles.itemTwo]}>
                    <Text style={styles.itemText}>2</Text>
                </View>
                <View style={[styles.item, styles.itemThree]}>
                    <Text style={styles.itemText}>3</Text>
                </View>
            </View>
        );
    }
}

注意到第二级的View标签的style属性的大括号里面是一个数组, 这样就可以应用多个样式.
然后再去定义这几个样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {},
    itemTwo: {},
    itemThree: {},
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

看一眼效果

默认这三个View会堆叠到一块儿, 然后靠着屏幕的上面去显示
现在我们修改一下style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {},
    itemTwo: {},
    itemThree: {},
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        justifyContent: 'center',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

注意到我们对最外面的View应用的样式是container, 现在我们修改这个container中的属性, 加入一行justifyContent: 'center', justifyContent决定子元素是应该在头部，中部，尾部还是平均分布, 默认是flex-start, 就是上面那个样子, 现在我们把它改成center以后再观察一下

可以看到子元素们都居中显示了.
flex-end效果:

space-between效果:

space-around效果:

注意到space-between是将子元素的首尾都靠着父元素的首位, 然后让这几个子元素平均排列, space-around是将父元素的空间平均分配, 然后每个子元素都放在被分配的空间的中间位置.

alignItems

我们再注意到, 这几个子元素默认的宽度就是屏幕的宽度, 这是因为他们的包装容器alignItems属性的值默认是stretch, 现在我们修改一下, 将alignItems的属性改成flex-start

1
2
3
4
5
6
7
container: {
        justifyContent: 'space-around',
        alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }

效果如下

还可已设置成center、flex-end

alignSelf

alignSelf可以控制子元素与包装容器的对齐方式.
我们也可以单独的去控制每个子元素的对齐方式, 比如我们可以找到itemOne、itemTwo、itemThree的样式, 设置如下:

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
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
    },
    itemOne: {
        alignSelf: 'flex-start',
    },
    itemTwo: {
        alignSelf: 'center',
    },
    itemThree: {
        alignSelf: 'flex-end',
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        justifyContent: 'space-around',
        alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如图:

flex

现在我们想让每个子元素都占总空间的三分之一, 那就在注释掉其他属性, 然后再item里面设置flex属性为1, 代码如下:

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
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

如果想让某个某个项目多占一点地方, 可以去单独设置一下这个项目的flex属性, 比如我们设置项目三的flex属性为2

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
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

flexDirection

现在这几个项目是在同一列里面从上到下显示的, 这是因为他们的包装容器的flexDirection的值默认是column, 也就是所有子元素都在同一列中, 那就是从上到小排列.现在我们把这个属性的值改为row, 让所有子元素都在同一行, 从左到右排列

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
let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        // alignSelf: 'flex-start',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        flexDirection: 'row',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});

效果如下:

技巧

如果你不知道某个属性有哪些值可以设置, 你可以先随便写一个错的值
比如这里我在alignSelf写了一个错的值

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
 let styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#6435c9',
        margin: 6,
        flex: 1,
    },
    itemOne: {
        alignSelf: 'ddd',
    },
    itemTwo: {
        // alignSelf: 'center',
    },
    itemThree: {
        // alignSelf: 'flex-end',
        // flex: 2,
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    container: {
        // justifyContent: 'space- around',
        // alignItems: 'flex-start',
        // flexDirection: 'row',
        backgroundColor: '#eae7ff',
        flex: 1, // 占满全屏
        paddingTop: 23,
    }
});


接着刷新reload的时候就会报错, 报错信息里说, alignSelf只能是auto、flex-start、flex-end、center、stretch、baseline中的某一种

0%