如何实现ReactNative屏幕适配-创新互联
这篇文章给大家分享的是有关如何实现React Native屏幕适配的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务南京,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575屏幕适配的前置知识
RN 中的尺寸单位为 dp,而设计稿中的单位为 px
原理
虽然单位不同,但是元素所占屏幕宽度的比例是相同的
利用元素所占屏幕比例不变的特性,来将 px 转为 dp(这样实现屏幕适配的话,在不同尺寸的屏幕下,元素会等比放大或缩小)
公式如下:
设计稿元素宽度(px) / 设计稿总宽度(px) = 元素的宽度(dp) / 屏幕的总宽度(dp)
我们要求的就是 元素的宽度(dp)
可以得出:
元素的宽度(dp) = 设计稿元素宽度(px)* 屏幕的总宽度(dp) / 设计稿总宽度(px)
代码实现
// util.js import { Dimensions } from 'react-native'; // 设备宽度,单位 dp const deviceWidthDp = Dimensions.get('window').width; // 设计稿宽度(这里为640px),单位 px const uiWidthPx = 640; // px 转 dp(设计稿中的 px 转 rn 中的 dp) export const pTd = (uiElePx) => { return uiElePx * deviceWidthDp / uiWidthPx; }
使用
每次给元素设置尺寸样式时,使用 pTd() 函数即可(传入设计稿中元素的实际 px)。
感谢各位的阅读!关于“如何实现React Native屏幕适配”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前名称:如何实现ReactNative屏幕适配-创新互联
标题路径:http://scyanting.com/article/cocdeo.html