今天是重阳节，祝大家节日快乐，今天继续更新RN相关的博客。上篇博客《
一、Flex
首先我们先来看一下flex的使用方式，flex属性接收的是一个number类型的值, 该值表示弹性布局的比例系数。具体的我们还要看一下下方关于Flex的一个Demo。
下方就是flex的具体使用方式，其中的flexValue是一个number类型的值。
<View style={{ flex: flexValue />接下来我们来看一下flex具体的一个示例。我们通过点击来修改中间的flex的值来观察flex对每个view的影响：
三个黑块中的初始的flex值为1， 所以三个黑色方块会平分屏幕。
每点击一次，中间的黑块的flex数增加1，然后我们就看到中间黑块会增大，三个黑块的比例变成了1 : 2 : 1。每次点击都会有变化。
最后我们来简单的看一下该效果的实现，代码如下。
首先我们来看一下item的实现，Item即对应着每个黑块。这个item方法有个名为flexValue的参数，该参数用来接收设置的flex的值。所以在item中我们将flexValue指定给了View的flex属性。
然后我们在看一下render中的实现。在Render中，我们添加了一个View来容纳item(黑块)，View中三个item就对应着上述的三个黑块。中间的item的flex的值是从Status中获取的，下方会介绍到。
最后我们在看一个ClickView这个方法，该方法会在点击View时执行，执行该方法时，我们为Status存储的flexValue自增了1。也就是说没点击 1 次中间的item的flex就会增加1。所以我们最终看到的效果是没点击一次，中间的黑块会增大。
下方是上述示例的完整代码：
View Code
二、FlexDirection
看完flex属性，接下来我们来看一下flexDirection属性。该属性在FlexBox布局中也是一个尤为重要而且比较常用的一个属性。flexDirection主要是用来控制子元素的布局方向的，主要分为横向布局和纵向布局，默认是纵向布局（column）。下方是flexDirection的属性值和使用方式。
属性值：
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";用法示例：
<View style={{ flexDirection: 'row' />
flexDirection的属性值主要有以下几个：
row : '行'，该值表示子元素自左向右横向排列, 。如下图的row, 先放的子元素1，如果有子元素2的话，会放到子元素1的右边，依次类推的横向布局。
row-reverse: '逆向的行'，这个与row相反，该属性表示自右向左横向排列。具体参见下图中的row-reverse。
column：'列'，该属性值表示子元素自上而下纵向排列，具体参见下方的column。
column-reverse: '逆向的列'，这个与column相反，该属性则表示自下而上的纵向排列，具体参见下方的column-reverse。
因该部分的demo对应的代码比较简单，介绍如下：
首先我们封装了一个名为FlexDirectionTestView的视图，该视图对应着上述展示 1 2 3的视图。该视图对外留了一个属性，用来接收flexDirection。外边传入什么flexDirection的值，1 2 3这三个子视图就按什么排列。
在FlexDirectionTestComponent组件中，我们就调用了FlexDirectionTestView这个视图，传入了不同的flexDirection属性，从而这个 1 2 3 子元素就会按照我们要求的样式去展示。
完整代码示例：
View Code
三、JustifyContent
今天这篇博客的干货还是比较足的，接下来我们来看一下第三个比较重要的属性justifyContent。该属性也是比较常用的，通常被用来控制子元素的左右方向的布局，这个与上面的flexDirection不同，justifyContent会控制整体子元素左右方向上的一个约束关系。下方是justifyContent的属性值和使用方式
属性值：
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"用法示例：
<View style={{ justifyContent: 'flex-start' />
具体的还得看下方这个GIF图，该图中就列举了justifyContent所有的属性值，并且展示了每个属性值的不同表现形式，接下来详细的介绍一下每个属性值的作用。
