快捷導(dǎo)航

詳解React Native 屏幕適配（炒雞簡單的方法）

更新時間：2018年06月11日 13:42:34 作者：hileix

React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

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

屏幕適配的前置知識

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）。

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

您可能感興趣的文章:

相關(guān)文章

Remix?路由模塊輸出對象handle函數(shù)
這篇文章主要為大家介紹了Remix?路由模塊輸出對象handle函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
React項目中應(yīng)用TypeScript的實現(xiàn)
TypeScript通常都會依賴于框架，例如和vue、react 這些框架結(jié)合，本文就主要介紹了React項目中應(yīng)用TypeScript的實現(xiàn)，分享給大家，具體如下：
2021-09-09
react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
詳解React中父子組件數(shù)據(jù)傳遞和修改的方式及原理
這篇文章主要為大家詳細(xì)介紹了React中父子組件數(shù)據(jù)傳遞和修改的方式及原理,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
JavaScript中的useRef 和 useState介紹
這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹，下列文章，我們將學(xué)習(xí) useRef 和 useState hook是什么，它們的區(qū)別以及何時使用哪個。這篇文章中的代碼示例將僅涉及功能組件，但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下
2021-11-11
React SSR樣式及SEO的實踐
這篇文章主要介紹了React SSR樣式及SEO的實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
react顯示文件上傳進(jìn)度的示例
這篇文章主要介紹了react顯示文件上傳進(jìn)度的示例，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
2021-04-04
React插槽使用方法
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
快速創(chuàng)建React項目并配置webpack
這篇文章主要介紹了創(chuàng)建React項目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2022-01-01
React狀態(tài)提升案例介紹
這篇文章主要介紹了React狀態(tài)提升案例，所謂狀態(tài)提升就是將各個子組件的公共state 提升到它們的父組件進(jìn)行統(tǒng)一存儲、處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-04-04