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 的默认单位和自适应布局方案

react-native 之布局篇

移动端尺寸基础知识

  

 

转载于:https://www.cnblogs.com/lcyuhe/p/7451823.html