px：設備實際像素單位

dp/pt：邏輯像素單位（IOS的尺寸單位為pt，Android的尺寸單位為dp）

在設計和開發過程中，應該盡量使用邏輯像素尺寸來思考界面。

UI 給默認 640 的圖，采用 pxToDp 函數，即可將 UI 等比放大到機器上。

import {Dimensions} from ‘react-native‘;

// 58 app 只有豎屏模式，所以可以只獲取一次 width
const deviceWidthDp = Dimensions.get(‘window‘).width;
// UI 默認給圖是 640
const uiWidthPx = 640;

function pxToDp(uiElementPx) {
return uiElementPx *  deviceWidthDp / uiWidthPx;
}

export default pxToDp;
 

調用方法

import pxToDp from ‘./pxToDp‘;

...
<View style={{width:pxToDp(100),height:pxToDp(100)}}></View>
...

參考網址：

React Native 的默認單位和自適應布局方案

react-native 之布局篇

移動端尺寸基礎知識

React Native自適應設備寬度解決方案