react-native 实现自适应单位

相信小伙伴们在初次进入react-native领域的时候对该领域的长度单位dp感到疑惑不同于web开发的px单位。

px即像素,是画面中最小的点(单位色块)。像素的大小是没有固定长度值的,不同设备上1个单位像素色块的大小是不一样的。

dp,是一种基于屏幕密度的抽象单位。在每英寸160点的显示器上(也就是基本的像素密度),1dp = 1px。dp是相对长度单位,简单的说1dp在不同的屏幕或者不同的ppi下展示出来的“物理长度”可能不一致。

科普到此结束,接下来我们的重点是解决如何在react-native中使用像web领域的百分比单位来进行响应式布局。

dp 不能用于响应式UI开发,为了创建响应式UI,我们需要定义两个单位计算函数。接收百分比字符串作为参数,然后分别以dp的形式返回屏幕实际宽度或高度的百分比。

image.png

我们先获取屏幕的实际宽高,wp和hp分别计算宽度/高度,都是接收一个百分比字符串,然后返回计算的实际比例数值。

这里roundToNearestPixel.roundToNearestPixel的作用是用来精确像素值的。

image.png

这样我们就可以把该函数导出到页面的任何地方使用了,在需要自适应的地方就可以很轻松的解决这个问题了。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容