React Native自适应设备宽度解决方案

Posted 2020-10-04 种一棵树的最佳时间是十年前，其次是现在

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 之布局篇

移动端尺寸基础知识