資訊專欄INFORMATION COLUMN
摘要：前言可以開發(fā)和的，在開發(fā)過程中，勢必會遇上屏幕適配好幾種尺寸的屏幕以及各種尺寸的屏幕的問題，下面介紹一種幾行代碼搞定適配的方法屏幕適配的前置知識中的尺寸單位為，而設(shè)計稿中的單位為原理雖然單位不同，但是元素所占屏幕寬度的比例是相同的利用元素所
前言
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配（ios 好幾種尺寸的屏幕以及 android 各種尺寸的屏幕）的問題，下面介紹一種幾行代碼搞定 RN 適配的方法！
屏幕適配的前置知識RN 中的尺寸單位為 dp，而設(shè)計稿中的單位為 px
原理雖然單位不同，但是元素所占屏幕寬度的比例是相同的
利用元素所占屏幕比例不變的特性，來將 px 轉(zhuǎn)為 dp（這樣實現(xiàn)屏幕適配的話，在不同尺寸的屏幕下，元素會等比放大或縮小）
公式如下：
設(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）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95341.html
摘要：圖片資源作為與用戶交互的界面元素，在客戶端產(chǎn)品中起到了非常重要的角色作用。在應(yīng)用開發(fā)中，移動端與的圖片使用策略也有所不同。端較大的內(nèi)存容量，快速的渲染能力使各類型圖片資源都能得到較好的使用。圖片資源（ jpeg、png、svg、webp ... ）作為與用戶交互的界面元素，在客戶端產(chǎn)品中起到了非常重要的角色作用。在應(yīng)用開發(fā)中，移動端與PC的圖片使用策略也有所不同。PC端較大的內(nèi)存容量，快速的...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為，那它每英寸約含有個物理像素點。導(dǎo)讀 移動端適配，是我們在開發(fā)中經(jīng)常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
閱讀 3390·2023-04-26 01:40
閱讀 3093·2021-11-24 09:39
閱讀 1403·2021-10-27 14:19
閱讀 2648·2021-10-12 10:11
閱讀 1307·2021-09-26 09:47
閱讀 1847·2021-09-22 15:21
閱讀 2711·2021-09-06 15:00
閱讀 894·2021-08-10 09:44
