React Native 的默认单位和自适应布局方案
默认单位 dp设置默认宽高的时,是不需要带单位的,如下所示: <View style={{width:100,height:100}}></View> 那么,布局的默认单位是什么?在官方文档中有一段关于布局单位的描述。 static getPixelSizeForLayoutSize(layoutSize: number) Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.
1dp = 1(css)px
关于 dp 官网给了我一个定义: A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp: dp = (width in pixels * 160) / screen density 很明显, 1dp = 1物理px (screen density = 160) 1dp = 2物理px (screen density = 320) 1dp = 3物理px (screen density = 480) 同理在 H5 页面,以下等式是成立的。 1 (css)px = 1物理px (device pixel ratio = 1) 1 (css)px = 2物理px (device pixel ratio = 2) 1 (css)px = 3物理px (device pixel ratio = 3) 而实际上 也就是说,1dp = 1(css)px。 屏幕的单位和概念对比在 Android 中, 在 google 布局单位文档中,关于
其中 240/160 两列,像素比同为1.5,可证明 下面给出一些常见屏幕概念的对比表格
1dp = 1(css)px = 1px * pixelRatio 自适应布局方案自适应布局方案采用了,将 UI 等比放大到 app 上的自适应布局。 UI 给默认 640 的图,采用 pxToDp 函数,即可将 UI 等比放大到 Android 机器上。 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> ... 如果 UI 图默认不是 640 宽,可以通过 PS 设置为 640 宽。
参考链接: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |