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