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() 两种十六进制与函数方法

• '#f0f' (#rgb)

• '#ff00ff' (#rrggbb)

• 'rgb(255, 0, 255)'

• 'rgba(255, 255, 255, 1.0)'

• 'transparent'全透明

色调-饱和度-亮度 (HSL)

也支持 hsl() 和 hsla() 函数方法：

• 'hsl(360, 100%, 100%)'

• 'hsla(360, 100%, 100%, 1.0)'