如何實現(xiàn)ReactNative屏幕適配-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)如何實現(xiàn)React Native屏幕適配的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)南京,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

屏幕適配的前置知識

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

原理

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

公式如下：

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

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

可以得出：

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

代碼實現(xiàn)

// util.js
import { Dimensions } from 'react-native';

// 設(shè)備寬度，單位 dp
const deviceWidthDp = Dimensions.get('window').width;

// 設(shè)計稿寬度（這里為640px），單位 px
const uiWidthPx = 640;

// px 轉(zhuǎn) dp（設(shè)計稿中的 px 轉(zhuǎn) rn 中的 dp）
export const pTd = (uiElePx) => {
 return uiElePx * deviceWidthDp / uiWidthPx;
}

使用

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

感謝各位的閱讀！關(guān)于“如何實現(xiàn)React Native屏幕適配”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享文章：如何實現(xiàn)ReactNative屏幕適配-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://muchs.cn/article40/cocdeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)