RN中使用的尺寸单位是dp
使用PixelRatio进行适配,相关API:
1.PixelRatio.roundToNearestPixel
将布局大小(dp)四舍五入为与整数个像素对应的最近布局大小。例如,在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33,它恰好对应于(8.33 * 3)= 25像素
不是将dp转化为px
2.PixelRatio.getPixelSizeForLayoutSize
将布局大小(dp)转换为像素大小(px),保证返回一个整数
3.StyleSheet.hairlineWidth
- 当前平台上的最细的宽度。可以用作边框或是两个元素间的分隔线
- 该值并不是一个常量,他的单位是dp,但在不同分辨率上最后渲染出来的始终是1px的物理像素
**
RN如何做屏幕适配
**
-
尺寸适配不同屏幕
1.当设置的单位是dp时,不需要考虑这个因素,因为系统会根据DPR(设备像素比率)自动将dp转化成相应的像素值
?:1dp,在2倍屏上被转化成2px,在3倍屏上被转化成3px2.当设置的单位是px时,要将px转化成dp,因为RN的默认单位是dp,转换方法deviceWidth / 750 * size
deviceWidth是RN获取到的屏幕宽,单位是dp
UI搞是基于750px的屏幕进行设计
size就是设置的px值 -
像素对齐
当第一步获取到的像素值是小数时,会导致在GPU渲染时,对没对齐的边缘,需要进行插值计算,这个插值计算的过程会有性能损耗,所以要用到roundToNearestPixel方法 -
实现真正的1px的分割线
如果我们设置的单位是1px,走完上诉流程,在1倍2倍3倍屏上分别渲染的真正像素分别是:0.5px, 1px, 1.5px,在1倍屏和3倍屏上并不是我们真正想要的1px像素宽
如果我们设置的单位是1dp,走完上诉流程,在1倍2倍3倍屏上分别渲染的真正像素分别是:1px,2px,3px,结果也不是我们想要的。
解决方式就是,当想要设置1px的线宽时,直接返回StyleSheet.hairlineWidth
代码:
const function px(size) {
if (size == 1) {
return StyleSheet.hairlineWidth;
}
return PixelRatio.roundToNearestPixel(deviceWidth / 750 * size);
}