react-native 之布局总结

前言

之前我们讲了很多react-native的基础控件，为了方便大家的理解，我们来对react-native的布局做一个总结，观看本节知识，你将看到。

• 宽度单位和像素密度
• flex的布局
• 图片布局
• 绝对定位和相对定位
• padding和margin的区别和应用场合
• 文本元素

宽度单位和像素密度

我们知道在Android中是用设备像素来作为单位的（后面又出现了百分比这么 一个概念），ios中后面也有了Auto Layout和1倍图，二倍图等概念（xib+storyboard）。然而react的宽度不支持百分比，那么React怎么提供尺寸的呢？PixelRatio，PixelRatio及像素密度，可以看看官方的介绍。

 var image = getImage({
   width: 200 * PixelRatio.get(),
   height: 100 * PixelRatio.get()
 });
 <Image source={image} style={{width: 200,