RN学习-布局

• 边框：想让自己外边有边框时候,类似ios的layer.borderWidth

borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 各方向边框的颜色,<>表示连着一起，例如borderBottomColor
borderColor 边框颜色

• 外边距：设置自己在父控件的位置的时候使用

margin number 外边距
marginBottom number 下外边距
marginHorizontal number 左右外边距
marginLeft number 左外边距
marginRight number 右外边距
marginTop number 上外边距
marginVertical number 上下外边距

• 内边距：设置自己的子控件相对自己的位置的时候使用

padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 做内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距

• 相对定位和绝对定位
  边缘

left    左边缘。
right   右边缘。
top     顶部边缘。
bottom  底部边缘。

定位

absolute：绝对定位，参照父控件位置定位
relative：相对定位，参照当前控件原始位置定位

两者配合使用，设置定位方式，在设置四周的距离

• Flex布局：运用于父与所有的子控件的相对布局

http://reactnative.cn/docs/0.49/layout-with-flexbox.html#content

flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布，在RN中默认为column

row（默认值）：主轴为水平方向，从左向右。依次排列
row-reverse：主轴为水平方向，从右向左依次排列
column：主轴为垂直方向，默认的排列方式，从上向下排列
column-reverse：主轴为垂直方向，从下向上排列

flexWrap:决定子控件在父视图内是否允许多行排列，默认为nowrap

nowrap 组件只排列在一行上，可能导致溢出
wrap   组件在一行排列不下时，就进行多行排列

justifyContent决定子组件在主轴中具体布局，是靠左，还是居中等，默认为flex-start

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始
flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始
center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐
space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半

alignItems:决定子组件在测轴中具体布局，如果侧轴垂直，决定子组件在上，还是下，或者居中，默认为stretch

flex-start 子组件向侧轴起点对齐
flex-end 子组件向侧轴终点对齐
center 子组件在侧轴居中
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度

alignSelf:自定义自己的侧轴布局，用于一个子组件设置。
注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局，默认为auto。

auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
flex-start 子组件向侧轴起点对齐。
flex-end 子组件向侧轴终点对齐。
center 子组件在侧轴居中。
stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。

flex: 决定子控件在主轴中占据几等分。可以为任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度