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：图片拉伸适应组件大小，图片有可能会发生变形