React Native 的默认单位和自适应布局方案

sihai 发布于2019-08-19 18:03 / 2284人阅读

摘要：方式，是用于把默认以单位长度，转化为对应的数值。屏幕的单位和概念对比在中，等于，表示像素密度。下面给出一些常见屏幕概念的对比表格与的关系为自适应布局方案自适应布局方案采用了，将等比放大到上的自适应布局。

默认单位 dp

设置默认宽高的时，是不需要带单位的，如下所示：

那么，布局的默认单位是什么？在官方文档中有一段关于布局单位的描述。

static getPixelSizeForLayoutSize(layoutSize: number) 
Converts a layout size (dp) to pixel size (px).
Guaranteed to return an integer number.

getPixelSizeForLayoutSize 方式，是用于把默认以 dp 单位长度，转化为对应的 px 数值。那么很明显，默认的布局单位是 dp。

1dp = 1(css)px

dp 到底是个什么样单位？

关于 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

很明显， dp 与 物理px 有一个关于 (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）

而实际上 (160/screen density) 就是 pixelRatio，也就是就是写 H5 页面时，像素比率 window.devicePixelRatio。

也就是说，1dp = 1(css)px。

屏幕的单位和概念对比

在 Android 中，screen density 等于 DPI，表示像素密度。

在 google 布局单位文档中，关于 screen density 有过这样的描述，

dpi 有过这样的描述

其中 240/160 两列，像素比同为1.5，可证明 screen density 和 dpi概念一样，只是换了个表达方式。

下面给出一些常见屏幕概念的对比表格

dp 与 px 的关系为：

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";

...

...

如果 UI 图默认不是 640 宽，可以通过 PS 设置为 640 宽。

参考链接：
RN官网 http://facebook.github.io/react-native/docs/pixelratio.html#content
px、dp、sp对比 http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android/2025541#2025541
Android 布局方案（Google）https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-
Android 布局方案（赵凯强）http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79136.html

移动前端 - 收藏集 - 掘金

摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...

Jochen 2019-08-29 12:43 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
[RN] React Native style -- 样式的使用

摘要：表示在上的对齐方式，基于的顶部基于的底部基于的中部布满整个。的属性所占的比例大小。它允许项目中当个和其他不一样的对齐方式，会覆盖的属性。 React-Native 样式的使用。 React-Native 编写的应用的样式不是靠css来实现的，而是依赖javascript来为你的应用来添加样式，先不讨论这样做的好处与坏处，因为这个实现方法本身就存在着很多争议，我们主要关注他的样式的语法和...

FrozenMap 2019-08-21 10:49 评论0 收藏0