ReactNative布局
盒子模型
image
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
-
Content(内容) - 盒子的内容，显示文本和图像。
元素的宽度和高度
指定一个元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
Flexbox布局
flex
flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。
image
flexDirection
决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢
enum('row', 'row-reverse', 'column', 'column-reverse')
image
justifyContent
justifyContent可以决定其子元素沿着主轴的排列方式
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')
image
alginItems
alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')
image
alginSelf
覆盖父级元素设置的alignItems属性，更改其在父代中的对齐方式
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')
image
flexWrap
enum('wrap', 'nowrap', 'wrap-reverse')
image
alginContent
子元素需要折行显示时，每行（不是每行的内的元素）的对齐方式。
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')
image
position
relative：相对定位
改元素参与布局，有位置和大小。通过top、right、bottom、left设置相对于原来位置的偏移量。偏移量不会影响任何同级元素或父元素的位置。
absolute：绝对定位
元素不会参与正常的布局流程。相反，它的布局与兄弟姐妹无关。的位置被确定基于所述top，right，bottom，和left的值。
image
颜色
红-绿-蓝 (RGB)
React Native 支持 rgb() 和 rgba() 两种十六进制与函数方法
