[转] react-native 之布局篇

PS: 苹果使用的宽度单位是为了设计开发者在应用上使用接近的数值。比如宽度范围都在320-414之间。但是宽度对应到像素是有一个转换比例的，对于背景图尤其要准备足够像素的图片。这个足够像素可以通过公式PixelRatio计算得到，iphone6P最大是1080*1920

PS: React native 中设置的width和height是容器的大小，image会去适配这个容器，如果容器的比例和图片一致，那图片就能完整显示。如果容器的宽度不够，正常情况下就会截取部分宽度。高度亦然

PS：图片显示还要考虑父亲的view的大小，如果image的height超过了容器的大小，那只有image的中间部分会显示在父容器中

宽度单位和像素密度

react的宽度不支持百分比，设置宽度时不需要带单位 {width: 10}， 那么10代表的具体宽度是多少呢？

不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧：

    var Dimensions = require('Dimensions');
    <Text style={styles.welcome}>
          window.width={Dimensions.get('window').width + '\n'}
          window.height={Dimensions.get('window').height + '\n'}
          pxielRatio={PixelRatio.get()}
    </Text> 

默认用的是ihone6的模拟器结果是：

    window.width=375
    window.height=667

我们知道iphone系列的尺寸如下图：

可以看到iphone 6的宽度为 375pt，对应了上边的375，实际上官文指出的单位为 dp 。 那如何获取实际的像素尺寸呢？ 这对图片的高清化很重要，如果我的图片大小为100100 px. 设置宽度为100 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。

react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html

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