React Native自适应设备宽度解决方案 移动端尺寸基础知识

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

移动端尺寸基础知识