前言

React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會(huì)遇上屏幕適配（ios 好幾種尺寸的屏幕以及 android 各種尺寸的屏幕）的問題，下面介紹一種幾行代碼搞定 RN 適配的方法！

屏幕適配的前置知識

RN 中的尺寸單位為 dp，而設(shè)計(jì)稿中的單位為 px

原理

雖然單位不同，但是元素所占屏幕寬度的比例是相同的
利用元素所占屏幕比例不變的特性，來將 px 轉(zhuǎn)為 dp（這樣實(shí)現(xiàn)屏幕適配的話，在不同尺寸的屏幕下，元素會(huì)等比放大或縮小）

公式如下：

設(shè)計(jì)稿元素寬度（px） / 設(shè)計(jì)稿總寬度（px） = 元素的寬度（dp） / 屏幕的總寬度（dp）

我們要求的就是 元素的寬度（dp）

可以得出：

元素的寬度（dp） = 設(shè)計(jì)稿元素寬度（px）* 屏幕的總寬度（dp） / 設(shè)計(jì)稿總寬度（px）

代碼實(shí)現(xiàn)

// util.jsimport { Dimensions } from 'react-native';// 設(shè)備寬度，單位 dpconst deviceWidthDp = Dimensions.get('window').width;// 設(shè)計(jì)稿寬度（這里為640px），單位 pxconst uiWidthPx = 640;// px 轉(zhuǎn) dp（設(shè)計(jì)稿中的 px 轉(zhuǎn) rn 中的 dp）export const pTd = (uiElePx) => { return uiElePx * deviceWidthDp / uiWidthPx;}

使用

每次給元素設(shè)置尺寸樣式時(shí)，使用 pTd() 函數(shù)即可（傳入設(shè)計(jì)稿中元素的實(shí)際 px）。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。