1.4样式，宽高，Flexbox

先来看看样式：http://reactnative.cn/docs/0.44/style.html#content

这里乏善可陈，基本要介绍的都在HelloWorld中介绍过了，无非就是设置几个style，然后在需要该style的地方引用一下。

不过这里多了个：

fontWeight:'bold

百度一下知道是设置字体粗细的意思。

不过如果运行一下会发现这两句：

        <Textstyle={[styles.bigblue,styles.red]}>bigblue, then red</Text>

        <Textstyle={[styles.red,styles.bigblue]}>red, then bigblue</Text>

后面的style里的属性如果跟前面style字段的属性如果有相同的，会覆盖前者的这个属性

比如这里就是后者的color覆盖了前者的color。

 

 

再看下一个高度与宽度

http://reactnative.cn/docs/0.44/height-and-width.html#content

看看里面的其中一个style：

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

设置了他的宽度width和高度height。

按官方的说法：React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

这总让我感觉在不同机型特别是安卓上面跑的时候适配会有问题啊。不过考虑适配的时候必然不能这样写，应该用比例布局。

 

再看看下面弹性宽高，。。。这就是比例布局？

看看官网解释：一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

这个属性我们在HelloWorld中讲过，其实按官网的说法来比较好理解，就是占比多少嘛。如果只有你一个控件，你是1，那么你就占满整个屏幕，如果有多个，那就看谁数字大谁占得多。

<View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 2, backgroundColor: 'skyblue'}} /><View style={{flex: 3, backgroundColor: 'steelblue'}} />

程序运行效果：

 

 

然后再看使用Flexbox布局：

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

这里主要介绍了三个布局属性：

flexDirection、alignItems和 justifyContent

flexDirection:决定的是主轴方向，属性有

colum（默认）:主轴为垂直方向，起点在上方

colum-reverse:主轴为垂直方向，起点在下方

row:主轴为水平方向，起点在左方

row-reverse：主轴为水平方向，起点在右方

 

justifyContent:主轴排列方式，如下图

 

alignItems:次轴排列方式。这个次轴是相对的，如果主轴设置为垂直方向，那么这个次轴就是水平方向；如果主轴设置为水平方向，那么次轴就是竖直方向。次轴的4个属性如下图：

 

然后我们run一下官网提供的代码，再按他的提示把属性值修改一下，就能体验出各种属性是什么效果啦。