React Native 常用布局

flex布局是什么

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间

基本概念

采用flex布局的元素,称为flex容器,所有子元素称为容器的成员,称为flex项目(flex item),简称为"项目".

1.png

容器的属性

  • flexDirection
  • flexWrap
  • justifyContent
  • alignItems

项目属性

  • flex
  • alignSelf
flexDirection 属性

flexDirection 属性决定了主轴的方向有四个属性值:

  • row:主轴为水平方向,起点在左端,方向从左到右
  • row-reverse: 主轴方向水平从右到左
  • column(默认值) :主轴垂直方向,从上到下
  • column-reverse:主轴方向垂直从下到上
flexWrap属性

flexWrap属性定义如果项目一行排不下如何换行。

  • nowrap:不换行(默认)
  • wrap:换行
justifyContent属性

定义了项目在主轴上的对齐方式

  • flex-start:在主轴的开始方向开始排列(默认)有点像Android的RelativeLayout的alignParen属性
  • flex-end:在主轴方向的结束方向开始排列
  • conter:居中
  • space-between:两端对齐,项目之间的间隔相等,(和Android的weight类似)
  • space-around: 每个项目两侧的间隔相等,相当于margin在Android的margin相等
alignItems属性

align-items属性定义项目在交叉轴上如何对齐

  • flex-start:交叉轴起点对齐
  • flex-end:交叉轴终点对齐
  • center:交叉轴居中对齐
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
  • baseline:项目的第一行文字的基准线对齐


    2.png
flex 属性

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)

flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大,如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

alignSelf属性

alignSelf属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。


3.png

如果有多个样式,样式会覆盖,

<Text style={[styles.textStyle,{width:70,backgroundColor:'green'}]}>
                    文本1
</Text>

推荐阅读更多精彩内容