在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。
在本篇里，让我们一起来了解一下，什么是Flexbox布局，以及如何使用。
一、长度的单位
在开始任何布局之前，让我们来首先需要知道，在写React Native组件样式时，长度的不带单位的，它表示“与设备像素密度无关的逻辑像素点”。
这个怎么理解呢？
我们知道，屏幕上一个发光的最小点，对应着一个pixel（像素）点。
假设下面三个矩形，代表三个屏幕大小一样的设备，但是，它们拥有的分辨率（resolution）不同：
图1.相同尺寸的设备 不同的分辨率
图上的每一个小格子，其实就代表了一个像素（pixel）。可以看到，一个像素点的大小，在这个三个物理尺寸一样但拥有不同分辨率的设备上，是不一样的。
如果我们以像素为单位来设置一个界面元素的大小，比如说2px的高度，那么这2px的长度上面的设备中就会是下面这个样子：
图2.不同分辨率下的2px实际高度
它们真实显示出的长度是不一样的。
我们想要一种长度单位，在同样物理尺寸大小的屏幕上（不论分辨率谁高谁低，只要物理尺寸大小一样即可），1个单位的长度所代表的物理尺寸是一样的。这种单位就应该是独立于分辨率的，把它起一个名字叫做 density-independent pixels，简称dp。这其实就是Android系统中所使用的长度单位。
举例来说，2dp宽，2dp高的内容，在不同分辨率但屏幕尺寸一样的设备上所显示出的物理大小是一样的。（一个题外话：有些Android开发者建议所有可点击的按钮，宽高都不应该少于48dp。）
图3. 2dp * 2dp大小的内容 在同样尺寸的屏幕中所占据的物理大小一致
Android中字体大小使用另外一个单位，叫做scale independent pixels，简称sp。这个单位和dp很类似，不过它通常是用在对字体大小的设置中。通过它设置的字体，可以根据系统字体大小的变化而变化。
pixel与dp存在一个公式：px = dp * (dpi/160)。
dpi表示dot per inch，是每英寸上的像素点，它也有个自己的计算公式，具体这里就不展开了。只需要知道我们之所以要使用一个独立于设备分辨率的单位，主要是为了让应用在不同分辨率的设备中，看起来一致。
在RN中，同样也拥有一个类似于dp的长度单位。如果我们想知道自己的屏幕以这种长度的计量下是多少单位，可以通过引入react-native包中的Dimensions拿到，同时还可以查看本机的像素比例是多少。
import { Text, View, Dimensions, PixelRatio } from 'react-native'; const { height, width } = Dimensions.get('window'); const pxRatio = PixelRatio.get(); <View style={styles.container}> <Text style={styles.welcome}> {`width: ${width}, height: ${height}`} </Text> <Text style={styles.welcome}> {`pixel radio: ${pxRatio}`} </Text> </View>
显示如下：
图4. 当前手机的屏幕信息
它反映出，当前手机屏幕的宽度占据360个单位，高度占据640个单位。像素比例是3，实际上这就是一个 1080 * 1920 像素的手机。其中1080 = width * pixelRadio, 1920 = height * pixelRatio
二、Flexbox布局
Flexbox布局，也就是弹性盒模型布局。也许有Android开发经验的朋友还对LinearLayout，RelativeLayout，FrameLayout等布局方法记忆犹新，但是对于更了解CSS的Web开发者而言，使用flexbox布局肯定会让他感受到更加顺手的开发体验。
RN中的flexbox布局，其实源于CSS中的flexbox（弹性盒子）布局规范。其实它在CSS中还处于Last Call Working Draft（最终征求意见稿）阶段，但是主流浏览器对它都有了良好的支持。在RN中，几乎完全借鉴了其中的布局语义，同时更没有浏览器兼容的烦恼，用起来是很方便的。RN中只是把CSS的属性用camelCase写法代替连字符写法。后面还还会看到，默认的flex方向也不同。
理解弹性盒模型布局，首先要知道四个最基本的概念：Flex Container（容器），Flex Item（项），Flex Direction（方向）和Axis（轴）。
1.Flex Container
就是包裹内容的容器，需要把它的display设置为‘flex'（或者'inline-flex'）。
以下6个属性设置在容器上。
alignItems 指定item在侧轴上的对齐方式
alignContent 指定item在多条轴上的对齐方式
flexDirection 指定主轴方向
flexWrap 指定item在主轴方向如何换行
flexFlow flexDirection属性和flexWrap属性的简写形式
justifyContent 指定item在主轴上的分布方式
2.Flex Item
容器做直接包裹的元素。所谓弹性盒布局，通常想要布局的东西就是它们。
以下6个属性设置在项目上。
alignSelf 每个item可以单独设置对齐方式 覆盖Flex Container给设置的alignItems
order 指定item排列顺序 数字越小越靠前
flexGrow 指定item的拉伸比例
flexShrink 指定item的压缩比例
flexBasis 指定item在分配多余空间之前，占主轴的大小
flex 其实是 flexGrow flexShrink flexBasis的简写
3.Flex Direction and Axis
在弹性盒子中，项目默认沿着main axis（主轴）排列，和主轴垂直的轴叫做cross axis，叫做侧轴，或者交叉轴。
在盒子中，排列项目又四个方向：水平的正反两个，垂直的正反两个。
结构代码：