引言
由于小编忙于当前的项目，暂未更新简书，现在继续和大家一起去React Native门派学习，相信通过前几篇文章的介绍，我们对React Native门派有了一个大致了解，并且基本上搭建好了环境以及完成了新手村长的任务，写出了万门之祖的Hello world，那么接下来我们将逐一的了解，React Native中的每一个组件师兄，剖析他们的构成以及属性。咱们还是老套路直奔主题，上干货。
Flexbox布局
在学习各个组件之前，我们先学习一下Flexbox布局即这些组件如何排布布局的，如果你学过CSS布局，那么React Native中的Flexbox的工作原理与CSS基本一样的，没接触过也没关系，我们一起重头学习。
一.容器属性
(一).Flex Direction
flexDirection可以决定布局的主轴的方向，即子元素是横着排布还是竖着排布，
1.column是竖直轴(默认值)方向即竖着排布
屏幕快照 2017-11-06 上午10.38.26.png
2.row是水平轴方向即横着排布
屏幕快照 2017-11-06 上午10.38.40.png
(二).Justify Content
justifyContent可以决定其子元素沿着主轴的排列方式，即对齐方式
1.flex-start即左对齐
屏幕快照 2017-11-06 上午10.43.45.png
2.flex-end即右对齐
屏幕快照 2017-11-06 上午10.43.55.png
3.center即水平居中对齐
屏幕快照 2017-11-06 上午10.44.04.png
4.space-between即两端对齐
屏幕快照 2017-11-06 上午10.44.19.png
5.space-around即分散对齐
屏幕快照 2017-11-06 上午10.44.36.png
(三).Align Items
alignItems可以决定其子元素沿着次轴的对齐方式
1.flex-start即起点对齐
屏幕快照 2017-11-06 上午11.11.43.png
2.flex-end即终点对齐
屏幕快照 2017-11-06 上午11.03.55.png
3.center即垂直居中对齐
屏幕快照 2017-11-06 上午11.04.02.png
4.stretch
如果项目未设置高度或设为auto，将占满整个容器的高度（要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）
屏幕快照 2017-11-06 上午11.04.11.png
5.baseline
项目的第一行文字的基线对齐。
屏幕快照 2017-11-06 上午11.16.57.png
(四).flexWrap]
水平或垂直布局时：如果子View放不下，则自动换行, 默认为'nowrap'(不换行)
屏幕快照 2017-11-06 上午11.21.46.png
1.nowrap即不换行
屏幕快照 2017-11-06 上午11.29.16.png
2.wrap即换行（第一行在上方）
屏幕快照 2017-11-06 上午11.29.26.png
3.wrap-reverse即（第一行在下方）
屏幕快照 2017-11-06 上午11.29.40.png
二.元素属性
(一).alignSelf
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
屏幕快照 2017-11-06 下午1.37.25.png
(二).flex
权重，类似Android中weight
当flex取正整数值时是一个正数, 它使组件具有灵活性, 并且它的大小与其 flex 值成正比。因此, 将flex设置为2的组件将占用空间的两倍, 作为具有flex设置为1的组件。
当flex为0时, 该组件根据width和height进行调整, 并且不灵活。
当flex为-1 时, 组件通常根据width和height进行调整。但是, 如果没有足够的空间, 组件将收缩到其minWidth和minHeight.
flexGrow、flexShrink 和 flexBasis 的工作与 CSS 相同。
屏幕快照 2017-11-06 下午1.47.26.png
(三).position
定位模式，分为absolute和relative两种
1.absolute
即绝对定位，相对于父组件的位置
屏幕快照 2017-11-06 下午1.52.46.png
2.relative
相对定位，相对于当前位置
屏幕快照 2017-11-06 下午3.51.32.png
3.zIndex
定位的元素及其子代的zIndex顺序。当元素重叠时, zIndex顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有较低的元素
屏幕快照 2017-11-06 下午4.06.29.png
(四).padding和margin
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离，下面这张是CSS的效果图，只是名字不一样（marginTop），原理都是一样；
屏幕快照 2017-11-06 上午11.19.20.png
除了图上那些属性还有如下属性
1.margin
marginTop, marginLeft, marginBottom, marginRight
marginHorizontal: 水平外距离相当于marginLeft和marginRight
marginVertical:垂直外距离相当于marginTop和marginBottom
2.border
borderWidth,borderTopWidth,borderLeftWidth,borderBottomWidth,borderRightWidth
3.padding
paddingTop,paddingBottom,paddingLef,paddingRight
paddingHorizontal: 水平内距离相当于paddingLeft和paddingRight
paddingVertical:垂直内距离相当于paddingTop和paddingBottom
(五).overflow
指定在其块级容器的大小太大时, 是剪辑内容、显示滚动条还是显示溢出的内容.
屏幕快照 2017-11-06 下午4.32.38.png
网友评论