美文网首页
React Native-Flexbox布局使用总结

React Native-Flexbox布局使用总结

作者: Jeffrey599 | 来源:发表于2018-05-23 21:31 被阅读0次

前言:
最近在学习RN(React Native),一开始被他的跨平台和热更新的特性所吸引,在Android和iOS平台上90%的代码可以通用,出现问题后重新发布离线包即可动态修复。RN使用flexbox模型布局,下面讲讲我在使用flexbox布局的一些总结。

1. 容器、主轴和交叉轴是什么?(此处参考阮一峰老师的文章)

flexbox(弹性盒)是W3C提出的UI设计模型规范的一种实现,RN实现了其中大部分功能。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。


image

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

2. 容器属性

我们可以为每个容器添加特定的样式,我们使用StyleSheet.create的方式来添加样式,StyleSheet会自动为我们检查样式的合法性。

2.1 决定位置的键:

position:relative、absolute。表示位置是相对还是绝对。
top、bottom、left、right:他们得单位是pt。absolute(绝对)表示相对于父组件的位置,relative(相对)表示距离上一个同级组件的位置。

2.2 决定子组件排列规则的键:

flexDirection:row、row-reverse、column、column-reverse,分别代表横向从左到右、横向从右到左、纵向从上到下、纵向从下到上。
flexWrap:wrap、nowrap。表示在子组件排列时超过屏幕宽度后是否会自动换行。
justifyContent:flex-start、flex-end、center、space-between、space-around。表示在一个方向上如何排列子组件。简单解释分别是:靠左排列,靠右排列、居中、填满居中、均匀居中。
alignItem:flex-start、flex-end、center、stretch,代表子组件的对其规则,也就是子组件的交叉轴上排列方式,分别是:顶部对齐、底部对齐、中部对齐、拉长对齐。

2.3 决定组件显示规则的键:

flex:按flex的值的比例去分配据所剩余的空间。
alignSelf:flex-start、flex-end、center、stretch,代表子组件的对其规则,也就是子组件的交叉轴上排列方式,分别是:顶部对齐、底部对齐、中部对齐、拉长对齐。对应父组件alignItem的值,该属性可覆盖父组件alignItem的值。
border(边框)、margin(空隙)、padding(填充):具体方位上的高度可以单独指定类似:borderTopWidth、borderRightWidth...

3. 掌握了上述基本属性可以进行UI界面的排列,下面有一个例子:

image

要实现这样一个布局,需要灵活的用到我们的容器属性。


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

export default class Practice extends Component {
    static navigationOptions = {
        title: '骰子布局',
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.round_center}>
                    <View style={styles.point_center}/>
                </View>

                <View style={styles.round_white_sb}>
                    <View style={styles.point_start}/>
                    <View style={styles.point_end}/>
                </View>

                <View style={styles.round_white_sb}>
                    <View style={styles.point_start}/>
                    <View style={styles.point_center}/>
                    <View style={styles.point_end}/>
                </View>

                <View style={styles.round_column_sb}>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                </View>

                <View style={styles.round_column_sb}>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                    <View style={styles.round_sb}>
                        <View style={styles.point_center}/>
                    </View>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                </View>

                <View style={styles.round_column_sb}>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_end}/>
                    </View>
                    <View style={styles.round_row_sb}>
                        <View style={styles.point_start}/>
                        <View style={styles.point_start}/>
                    </View>
                </View>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: 'black',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    round_row_sb: {
        flexDirection: 'row',
        justifyContent: 'space-between',

    },
    round_center: {
        backgroundColor: 'white',
        borderRadius: 10,
        width: 100,
        height: 100,
        margin: 30,
        justifyContent: 'center',

    },
    round_white_sb: {
        backgroundColor: 'white',
        borderRadius: 10,
        width: 100,
        height: 100,
        margin: 30,
        justifyContent: 'space-between',

    },
    round_sb: {
        justifyContent: 'space-between',
    },
    round_column_sb: {
        backgroundColor: 'white',
        borderRadius: 10,
        width: 100,
        height: 100,
        margin: 30,
        flexDirection: 'column',
        justifyContent: 'space-between',

    },
    point_center: {
        backgroundColor: 'black',
        width: 22,
        height: 22,
        borderRadius: 11,
        alignSelf: 'center',
    },
    point_start: {
        backgroundColor: 'black',
        width: 22,
        height: 22,
        borderRadius: 11,
        alignSelf: 'flex-start',
        margin: 5,
    },
    point_end: {
        backgroundColor: 'black',
        width: 22,
        height: 22,
        borderRadius: 11,
        alignSelf: 'flex-end',
        margin: 5,
    },
});

以上是我的实现方案,真正动手完成布局才能体会到flexbox属性的奥妙之处。

相关文章

网友评论

      本文标题:React Native-Flexbox布局使用总结

      本文链接:https://www.haomeiwen.com/subject/jzpdjftx.html