[转] 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}} />
posted @ 2016-05-05 16:15  枪侠  阅读(670)  评论(0编辑  收藏  举报