react-native尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。这样的话,在不同屏幕尺寸下表现一致。(参考:设备像素、设备独立像素)
react-native指定组件大小可以是:
1、使用width height指定固定的大小;
2、使用flex弹性布局(使用前提是:父容器尺寸不为0)。
布局样式相关属性:
一般常用的像margin、padding就不列举了,只列举新增的几个属性:
1、paddingHorizontal、paddingVertical、marginHorizontal、marginVertical(同时指定top+bottom或者left+right)。
2、flex布局相关:
flex:number
flexDirection:row | column | row-reverse | column-reverse 布局方向
justifyContent:flex-start | flex-end | center | space-between | space-around 主轴排列方式
alignItems: flex-start | flex-end | center | stretch 次轴排列方式
alignSelf:取值同上,多一个auto;自己沿次轴的排列方式,覆盖父元素的设置
flexWrap:wrap | nowrap 子元素的换行方式:弹性布局默认是单行的,nowrap代表不换行,wrap代表多行。
补充CSS3的知识:
弹性盒子:含弹性容器(display:flex | inline-flex)+弹性子元素。常用属性:
(某些属性设置为auto,可以实现居中 或者 占据剩余空间。)
//某些属性设置为auto,可以实现居中 或者 占据剩余空间
display: flex | inline-flex
flex: 3
flex-direction: 排列方向 定义主轴
flex-wrap: 子元素换行方式
justify-content: 主轴方向对齐方式
align-items: 次轴方向对齐方式
align-content: 补充flex-wrap,指定多行排列的子元素对齐方式
align-self:覆盖父元素的align-items
flex-flow: 同时指定flex-direction flex-wrap