如何实现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://mswzjz.cn/article/cocdeo.html