成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React Native 的默認(rèn)單位和自適應(yīng)布局方案

sihai / 2351人閱讀

摘要：方式，是用于把默認(rèn)以單位長度，轉(zhuǎn)化為對應(yīng)的數(shù)值。屏幕的單位和概念對比在中，等于，表示像素密度。下面給出一些常見屏幕概念的對比表格與的關(guān)系為自適應(yīng)布局方案自適應(yīng)布局方案采用了，將等比放大到上的自適應(yīng)布局。

默認(rèn)單位 dp

設(shè)置默認(rèn)寬高的時，是不需要帶單位的，如下所示：

那么，布局的默認(rèn)單位是什么？在官方文檔中有一段關(guān)于布局單位的描述。

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

getPixelSizeForLayoutSize 方式，是用于把默認(rèn)以 dp 單位長度，轉(zhuǎn)化為對應(yīng)的 px 數(shù)值。那么很明顯， 默認(rèn)的布局單位是 dp。

1dp = 1(css)px

dp 到底是個什么樣單位？

關(guān)于 dp 官網(wǎng)給了我一個定義：

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 有一個關(guān)于 (160/screen density) 的正相關(guān)的關(guān)系：

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）

而實(shí)際上 (160/screen density) 就是 pixelRatio，也就是就是寫 H5 頁面時，像素比率 window.devicePixelRatio。

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

屏幕的單位和概念對比

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

在 google 布局單位文檔中，關(guān)于 screen density 有過這樣的描述，

dpi 有過這樣的描述

其中 240/160 兩列，像素比同為1.5，可證明 screen density 和 dpi概念一樣，只是換了個表達(dá)方式。

下面給出一些常見屏幕概念的對比表格

dp 與 px 的關(guān)系為：

1dp = 1(css)px = 1px * pixelRatio
自適應(yīng)布局方案

自適應(yīng)布局方案采用了，將 UI 等比放大到 app 上的自適應(yīng)布局。

UI 給默認(rèn) 640 的圖，采用 pxToDp 函數(shù)，即可將 UI 等比放大到 Android 機(jī)器上。

import {Dimensions} from "react-native";

// 58 app 只有豎屏模式，所以可以只獲取一次 width
const deviceWidthDp = Dimensions.get("window").width;
// UI 默認(rèn)給圖是 640
const uiWidthPx = 640;

function pxToDp(uiElementPx) {
return uiElementPx *  deviceWidthDp / uiWidthPx;
}

export default pxToDp;

調(diào)用方法

import pxToDp from "./pxToDp";

...

...

如果 UI 圖默認(rèn)不是 640 寬，可以通過 PS 設(shè)置為 640 寬。

參考鏈接：
RN官網(wǎng) 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 布局方案（趙凱強(qiáng)）http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79136.html

相關(guān)文章

  • 移動前端 - 收藏集 - 掘金

    摘要：使用移動設(shè)備查看頁面時會發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實(shí)踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網(wǎng)頁開發(fā)的同學(xué)想必都遇到過這樣尷尬的排版問題：在主體內(nèi)容不足夠多或者未完全加載出來之前，就會導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因?yàn)?..

    Jochen 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 ...

    CHENGKANG 評論0 收藏0

  • [RN] React Native style -- 樣式的使用

    摘要：表示在上的對齊方式，基于的頂部基于的底部基于的中部布滿整個。的屬性所占的比例大小。它允許項(xiàng)目中當(dāng)個和其他不一樣的對齊方式，會覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫的應(yīng)用的樣式不是靠css來實(shí)現(xiàn)的，而是依賴javascript來為你的應(yīng)用來添加樣式，先不討論這樣做的好處與壞處，因?yàn)檫@個實(shí)現(xiàn)方法本身就存在著很多爭議，我們主要關(guān)注他的樣式的語法和...

    FrozenMap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<