博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转] react-native 之布局篇
阅读量:6695 次
发布时间:2019-06-25

本文共 1021 字,大约阅读时间需要 3 分钟。

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');    
window.width={Dimensions.get('window').width + '\n'} window.height={Dimensions.get('window').height + '\n'} pxielRatio={PixelRatio.get()}

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

window.width=375    window.height=667

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

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

react 提供了PixelRatio 的获取方式

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

转载于:https://www.cnblogs.com/qiangxia/p/5462324.html

你可能感兴趣的文章
NGINX由入门到精通:编译安装nginx
查看>>
救援模式修复bootloader
查看>>
Java中元组的使用
查看>>
medusa 2.0的简单使用
查看>>
照片美妆---人脸老化
查看>>
zabbix3.2升级3.4报错Database error
查看>>
在C#中使用官方驱动操作MongoDB
查看>>
《精通javascript》几个简单的函数(一)
查看>>
XML 编辑器 介绍
查看>>
Makefile 中:= ?= += =的区别【转】
查看>>
linux内核栈与用户栈【转】
查看>>
Thread thread2 = new Thread()
查看>>
Hadoop 概述
查看>>
jquery select
查看>>
[Android] Android统计Apk , jar包方法数
查看>>
[Android Pro] Normal Permissions
查看>>
perl 工具小脚本
查看>>
深入了解STL中set与hash_set,hash表基础
查看>>
SQL存储过程调试
查看>>
42.2. Leaflet
查看>>