React Native布局详解

一、Flexbox 布局

Flex有两个属性:Container  和 Item

flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称”项目”。

 

 

容器属性

简述:

  • flexDirection(决定容器内所有子元素item的排列方向(即主轴方向),如row子元素横排,column子元素竖排)
  • justifyContent(定义了子元素Item在主轴方向上的排列方式,如center就居中,flex-start就是左端为开头)
  • alignItems(子元素沿竖直轴的排列方式,flex-start就靠上,center就放中间线)
  • flexWrap(定义是否换行,nowrap就不换行,wrap就换行)

 

常用:

 

1、flexDirection : 用来决定容器内所有子元素Item的排列方向,默认是竖直轴方向,即两个View竖直排列

(想让子元素横向并列就用flexDirection:’row’)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 

2、justifyContent:定义了子元素Item在主轴方向上的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

 

3、alignItems子元素沿竖直轴的排列方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

不常用:

1、flexWrap默认容器中的子元素Item都排列在一条轴线上,flexWrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认值):不换行

wrap:换行,且第一行在上方

wrap-reverse:换行,第一行在下方

 

元素属性:

1、flex 布局权重

1:0:flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间

 在部分组件指定了height的情况下,flex是“除了height以外剩余空间”的分布比例。例如:

<View style={{height:100}}>
    <View style={{flex: 3}} />
    <View style={{flex: 2}} />
</View>

两个子View的高度分别是 60和40。宽度同理

Flex计算规则详见:https://blog.csdn.net/u010377383/article/details/79661859

 

2、alignSelf

项目交叉轴方向自身对齐方式

 

二、设置border边线的方法

borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 1,
borderBottomColor:'#f5f5f5',

 

 

参考:

https://www.jianshu.com/p/4a61a517c792

https://blog.csdn.net/codetomylaw/article/details/52190636