React Native中的FlexBox布局

React Native通过一个基于FlexBox的布局引擎,在所有移动平台上实现了一致的跨平台样式和布局方案。

FlexBox布局目前支持的属性有如下6个:

(1)flex

(2)flexDirection

(3)alignSelf

(4)alignItems

(5)justifyContent

(6)flexWrap

接下来,我们一个一个的看一下每个属性的作用。

(1)flex属性

当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                </View>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                </View>  
                <View style={{flex:10, borderWidth:1, borderColor:'red'}}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/2高</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
    },  
    style_1:{  
        flex: 5,  
        height: 40,   
        borderWidth: 1,    
        borderColor: 'red',  
    }  
});  

上面的代码,最外层的View是可伸缩的,而且没有兄弟节点和它抢占空间。内层的三个View的flex属性值分别是5、5、10,所以,第一个View和第二个View分别占1 / 4的伸缩空间,最后一个View占1 / 2的伸缩空间。

(2)flexDirection

flexDirection在React Native中只有两个属性值,row(横向伸缩)和column(纵向伸缩)。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={styles.style_1}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                </View>  
                <View style={[styles.style_1, {flexDirection:'column'}]}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>  
                </View>  
                <View style={{flex:10, borderWidth:1, borderColor:'red'}}>  
                    <Text style={{marginTop:40, fontSize:25}}>1/2高</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
    },  
    style_1:{  
        flex: 5,  
        flexDirection: 'row',  
        height: 40,   
        borderWidth: 1,    
        borderColor: 'red',  
    }  
});  

(3)alignSelf

alignSelf的对齐方式主要有四种:flex-start、flex-end、center、auto、stretch。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={[styles.view]}>  
                    <Text>自由摆放</Text>  
                </View>  
                <View style={[styles.view, styles.center]}>  
                    <Text>居中摆放</Text>  
                </View>  
                <View style={[styles.view, styles.left]}>  
                    <Text>居左摆放</Text>  
                </View>  
                <View style={[styles.view, styles.right]}>  
                    <Text>居右摆放</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
        borderColor: 'red',  
        borderWidth: 1  
    },  
    view:{  
        borderWidth: 5,    
        borderColor: 'blue',  
        marginTop: 40,  
        width: 100,  
        height: 40  
    },  
    center:{  
        alignSelf: 'center'  
    },  
    left:{  
        alignSelf: 'flex-start'  
    },  
    right:{  
        alignSelf: 'flex-end'  
    }  
});

(4)alignItems

alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中。justifyContent用于垂直居中。

var Demo = React.createClass({  
    render: function() {  
        return (  
            <View style={styles.style_0}>  
                <View style={[styles.view]}>  
                    <Text>居中摆放</Text>  
                </View>  
            </View>  
        );  
    }  
});  
var styles = StyleSheet.create({  
    style_0:{  
        flex: 1,  
        borderColor: 'red',  
        borderWidth: 1,  
        justifyContent: 'center',  
        alignItems: 'center'  
    },  
    view:{  
        borderWidth: 3,    
        borderColor: 'blue',  
        width: 100,  
        height: 50  
    }  
});  Q

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

微信小程序实战–集阅读与电影于一体的小程序项目(七)

2232
来自专栏编程之旅

高性能设置圆角,告别离屏渲染

今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。

2251
来自专栏互联网软件技术

消息提示框-事件冒泡

1673
来自专栏编程微刊

前端js实现打印(导出)excel表格

3662
来自专栏wOw的Android小站

[iOS] 列表滑动展开隐藏头部HeaderView

首先看一下BiliBili客户端的视频浏览界面。默认界面Header完全展开,并且Header显示AV号(别乱想,就是视频编号了)以及播放按钮。滑动之后Head...

6442
来自专栏QQ音乐技术团队的专栏

小窗播放视频的原理和实现(上)

本文对小窗视频播放进行了详细的研究,针对几种实现方案进行了深入的对比分析,进而给出实现小窗视频播放的最优解。

4.2K15
来自专栏MasiMaro 的技术博文

对话框伸缩功能的实现

对话框的伸缩功能是指当触发某一操作时只显示部分对话框的内容,再次触发时显示全部的对话框范围,就比如画图软件上的选择颜色对话框,我们可以使用系统预定义的颜色,也可...

1222
来自专栏守候书阁

编写自己的代码库(css3常用动画的实现)

在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了...

1932
来自专栏DeveWork

jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)

承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》,本文将对前一篇的代码进行优化。还是转载自andyliu: 先给出个演示Demo:演示地址...

2126
来自专栏web开发

自实现jQuery版分页插件

3392

扫码关注云+社区

领取腾讯云代金券