[React Native Android 安利系列]FLEX布局精讲

头像
侯医生
    阅读 12 分钟
    2

    欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：
    https://segmentfault.com/blog...

    1. FLEX是什么？

    flex布局，本是一种新的css解决方案，它是『弹性布局』的缩写。我们上一节讲到过盒子模型，这个模型的值都是定死的，并不具备可伸缩的性质，所以，应对不同屏幕，做到响应式布局，就很困难。
    但是flex布局，给了我们一种全新的解决方案，从定位方式，到宽高设置，都可以做到随心所欲。
    比如：flex布局可以指定元素宽或者高相对于同级的比例，而不是定值。

    2. react-native中的flex

    我们先来看看，上一节中提到的，react-native支持的flex布局的一些属性吧：

    属性值 含义
    alignItems flex布局元素中，子元素沿纵轴排列方式
    alignSelf flex元素中，本项元素的纵轴对其方式
    flex 这里指代flex-grow，描述了元素的宽度比例值
    flexDirection 指代flex元素的排列方向
    flexWrap 指代flex元素的换行方式，取值为 nowrap/wrap
    justifyContent 指代flex元素在横轴上的排列方式，之后会进行详解

    可以说，react-native对于flex布局的支持还是比较全面的，少了几个简写的属性，非常的简洁、使用。而且，排布与css的flex布局基本一致。接下来，我们将对这些属性进行一一讲解与实践。

    2.1 flexDirection属性

    flex元素的排列方向，取值有：column|row

    2.1.1 column排布(默认)

    纵轴排列，竖向排列(如图2.1.1所示)：

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatar}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />  
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：一筒</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },  
    shadowBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },  
    back1: {
        elevation: 5,
    },  
    avatarArea: {
        width: 300,
        height: 300,
    },  
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }   
});

    clipboard.png
    图2.1.1

    2.1.2 row排布

    横向排列，如图2.1.2所示

    container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#fff',
},

    clipboard.png
    图2.1.2

    2.2 flexWrap属性

    flex布局的换行行为，取值有：nowrap | wrap

    2.2.1 nowrap排布

    不换行(默认)，效果如图 2.2.1所示：

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatar}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />  
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：一筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：一筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：一筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：一筒</Text>
                </View>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#fff',
    },
    shadowBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },
    back1: {
        elevation: 5,
    },
    avatarArea: {
        width: 300,
        height: 300,
    },
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }
});

    clipboard.png
    图 2.2.1
    我们看到，使用了此取值，就算元素宽度超出，也未对元素进行换行。

    2.2.2 wrap 换行，效果如图2.2.2所示：

    container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: '#fff',
},

    clipboard.png
    图2.2.2

    目测react-native对于换行的元素，采取的措施是隐藏。

    2.3 alignItems属性

    flex布局元素中，子元素沿当前轴的交叉轴的排列方式。取值：'flex-start', 'flex-end', 'center', 'stretch'。请注意，这里说的是『当前轴的交叉轴』，flexDirection的值为row的话，元素为横向排列，则alignItems控制元素的上下对齐方式。flexDirection的值为column的话，alignItems控制元素的左右最起方式。

    2.3.1 flex-start(默认)

    所有子元素排列在主轴开始处，flexDirection为row时效果如图2.3.1.1所示：

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatar}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：1筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text>姓名：2筒</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#fff',
    },
    shadowBlock: {
        height: 100,
        width: 100,
        backgroundColor: '#0f0',
    },
    back1: {
        height: 200,
    },
    avatarArea: {
        width: 300,
        height: 300,
    },
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }
});

    clipboard.png
    图2.3.1.1
    flexDirection为column时效果如图2.3.1.2所示：
    clipboard.png
    图2.3.1.2

    2.3.2 flex-end

    所有元素按照主轴结尾处排列，flexDirection为row时效果如图2.3.2.1所示：

    const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-end',
        backgroundColor: '#fff',
    },
    .....

    clipboard.png
    图2.3.2.1
    flexDirection为column时效果如图2.3.2.2所示：
    clipboard.png
    图2.3.2.2

    2.3.3 center

    所有元素居中对齐，如图2.3.3所示：

    const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
.....

    clipboard.png
    图2.3.3

    2.3.4 stretch属性

    在当前轴的交叉轴上，进行拉伸。如果元素没有设置宽度或者高度的话，则使用该值时，将会被拉伸。
    我们将上述例子的alignItems换位stretch，效果如图2.3.4.1所示(flexDirection为row)：

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatarArea}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text1}>姓名：1筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text2}>姓名：2筒</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'stretch',
        backgroundColor: '#fff',
    },
    shadowBlock: {
        backgroundColor: '#0f0',
    },
    back1: {
    },
    text1: {
        height: 100,
    },
    text2: {
        height: 200,
    },
    avatarArea: {
        backgroundColor: '#000'
    },
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }
});

    clipboard.png
    图2.3.4.1
    我们看到，几个子元素，高度均被拉伸。
    flexDirection换为column的话，则元素被横向拉伸(如图2.3.4.2):
    clipboard.png
    图2.3.4.2

    2.4 justifyContent属性

    justifyContent控制了元素在当前轴上的排列方式，当前轴有可能是column也有可能是row，下面以当前轴为row的情况做例子，column的情况，读着可以自己试着做做例子。另外注意，这个属性是设置在所有想排列的子元素的父级元素上的。
    justifyContent可选的值有

    属性值 含义
    flex-start 在当前轴开始处按序排列(默认)
    flex-end 在当前轴结尾处，开始按序排列
    center 在当前轴居中位置，两侧伸展排列
    space-between 所有元素打散，填充满整个当前轴，两侧无留白。
    space-around 所有元素打散，填充满整个当前轴，两侧有留白。

    2.4.1 flex-start布局

    效果如图2.4.1所示
    clipboard.png
    图2.4.1

    2.4.2 flex-end布局

    如图2.4.2所示，元素都聚集到了当前轴(row)的结尾处：
    clipboard.png
    图2.4.2

    2.4.3 center布局

    在当前轴居中，并两侧伸展排列，justifyContent: 'center', 如图2.4.3所示
    clipboard.png
    图2.4.3

    2.4.4 space-between布局

    所有元素，填充满整个屏幕，元素与元素间的留白，平均分布，并且最左边的元素与最右边的元素两侧不加留白。justifyContent: 'space-between'如图2.4.4所示:
    clipboard.png
    图2.4.4

    2.4.5 space-around布局

    与space-between类似，只不过，使用此属性时，排列元素两侧也会有留白，最终效果会使所有元素的左右两侧留白均一致。
    clipboard.png
    图2.4.5

    2.5 alignSelf属性

    该属性其实与alignItems的属性锁表达的意义一致，是不过alignItems应用于父级元素上，决定了所有子元素的排布方式，而alignSelf应用于单个子元素上，决定了子元素自己的对其方式。
    其取值与alignItems一样，也有 'flex-start', 'flex-end', 'center', 'stretch'。只是多了一个值'auto'，此值意味着，采用父级元素的alignItems所定义的对其方式。
    如，我们在父级元素上，定义了alignItems为center，于是我们看到，这个center被"雨露均沾"到各个子元素上(如图2.5.1所示):

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatarArea}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text1}>姓名：1筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text2}>姓名：2筒</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    shadowBlock: {
        backgroundColor: '#0f0',
    },
    back1: {
        height: 100,
        width: 100,
    },
    text1: {
        height: 100,
        width: 100,
    },
    text2: {
        height: 200,
    },
    avatarArea: {
        width: 100,
        height: 100,
        backgroundColor: '#000'
    },
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }
});

    clipboard.png
    图2.5.1
    可是有个子元素非是不听呢，它设置了alignSelf为flex-start(self这个词彰显了个性)，于是他就"独得恩宠"，跑到上面去了，如图2.5.2所示：

        avatarArea: {
        width: 100,
        height: 100,
        //子元素设置了此属性
        alignSelf: 'flex-start',
        backgroundColor: '#000'
    },

    clipboard.png
    图2.5.2

    同样的，我们可以指定单个元素对其到开始、结尾、中间....，这就是alignSelf的用法了。

    2.6 flex属性

    这个属性可谓是flex布局中，非常重要的属性了。之前的开发方式中，我们会指定元素的宽度与高度，这样的写死的方式，无法适应各种屏幕下的适配。而指定元素的flex，则可以达到，元素的宽高，按照比例排布。
    flex可以这样用，当我们拥有三个元素时，可以指定三个元素的比例关系，达到自适应的效果，代码如下(效果如图2.6.1所示)：    

    class hellowReact extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.avatarArea}>
                    <Image
                        source={myAvatar}
                        style={styles.avatar}
                    />
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text1}>姓名：1筒</Text>
                </View>
                <View style={[styles.shadowBlock, styles.back1]}>
                    <Text style={styles.text2}>姓名：2筒</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
    },
    shadowBlock: {
        backgroundColor: '#0f0',
    },
    back1: {
        // 指定后两个元素的flex值为2
        flex: 2,
    },
    text1: {
    },
    text2: {
        height: 200,
    },
    avatarArea: {
        // 指定第一个元素的flex值为1
        flex: 1,
        backgroundColor: '#000'
    },
    avatar: {
        resizeMode: Image.resizeMode.contain,
    }
});

    clipboard.png
    图2.6.1

    我们可以看到，此时元素的比例化为了1:2:2，这样布局，换了大屏幕的手机也依然会保持，妈妈再也不用担心我的屏幕适配了。

    3. 今日作业

    请使用flex布局完成一个类似于手机百度首页FEED流布局的界面。

    这一章，我们一起学习了flex布局的所有属性，下一章我们一起来做个例子，实现的就是今天的作业--手机百度上面新闻流的布局。
    形式大概就是这样：

    clipboard.png

    原创文章,版权所有,转载请注明出处

    react-nativeflex布局
    侯医生
    2.6k 声望1.4k 粉丝
    « 上一篇
    [聊一聊系列]聊一聊WEB前端安全那些事儿
    下一篇 »
    [React Native Android 安利系列]

    引用和评论

    推荐阅读
    头像
    [React Native Android 安利系列]ReactNative中的reactjs基础

    侯医生赞 3阅读 6.3k评论 3

    头像
    ReactNative开发笔记（持续更新...）

    kovli阅读 5.1k

    头像
    通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

    ShaoGongBra阅读 3.5k

    头像
    React Native 0.76：重大更新引领移动开发新潮流

    白水赞 1阅读 454

    头像
    鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙

    zacks阅读 773

    头像
    flex布局常见问题

    热饭班长赞 1阅读 491

    头像
    鸿蒙Flutter实战：01-搭建开发环境

    zacks阅读 438

    0 条评论
    得票最新