RN style的常用布局页面属性

flexDirection容器属性: row | row-reverse | column | column-reverse
该属性决定主轴的方向(即项目的排列方向)。
row:主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column(默认值):主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

justifyContent容器属性:flex-start | flex-end | center | space-between | space-around
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值):伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐,项目之间的间隔都相等。
space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

alignItems容器属性:flex-start | flex-end | center | baseline | stretch
定义项目在交叉轴上如何对齐,可以把其想像成侧轴(垂直于主轴)的“对齐方式”。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐 。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

fontSize?: number; 字体大小
fontWeight?: “normal” | “bold” | “100” | “200” | “300” | “400” | “500” | “600” | “700” | “800” | “900”; 字体加粗
textAlign?: “auto” | “left” | “right” | “center” | “justify”; 文字对齐方式
position?: “absolute” | “relative”; 在控件中的位置 内|外
bottom?: number; 底部距离
paddingVertical: number; 底部外边距

Image常用属性
reseizeMode:设置图片的填充模式,有三个可选值(默认值时cover)

cover:等比例缩放图片,超出部分不显示,使图片最短边占满组件
contain:等比例缩放图片,图片显示完全,即缩放到最长边占满组件
stretch:图片拉伸适应组件大小,图片有可能会发生变形

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页