RN的布局样式

使用style变量的方式设置样式

1. 实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

   e.g.： 
      const styles = StyleSheet.create({
            bigBlue: {
                  color: 'blue' , fontWeight: 'blod' , fontSize: 30,
             },
             red: {
                 color: 'red',
             }
      })
   

常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。

2. 指定宽高的属性：width,height
3. 指定背景颜色属性：backgroundColor
   e.g.: --- 使用内联样式表构建样式
   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
4. 弹性宽高布局：在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
   注: 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
   e.g.:
   <View style={{flex: 1}}>
   <View style={{flex: 1, backgroundColor: 'powderblue'}} />
   <View style={{flex: 2, backgroundColor: 'skyblue'}} />
   <View style={{flex: 3, backgroundColor: 'steelblue'}} />
   </View>

关于 Flexbox 的相关布局

1. flexDirection ： 默认是竖直轴方向
   e.g.(转化为水平方向布局): style={{flex: 1, flexDirection: 'row'}
2. Justify Content （子元素延主轴的排列方式）
   flex-start、center、flex-end、space-around以及space-between
   e.g. :
   <View style={{
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'space-between',
   }}>
   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
   <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
   <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
   </View>
3. Align Items (子元素延次轴的排列方式)
   在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方
   向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？
   亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
   注：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。