欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解React Native 屏幕適配（炒雞簡單的方法）

 更新時間：2018年06月11日 13:42:34   作者：hileix  
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配（ios 好幾種尺寸的屏幕以及 android 各種尺寸的屏幕）的問題，下面介紹一種幾行代碼搞定 RN 適配的方法！

屏幕適配的前置知識

RN 中的尺寸單位為 dp，而設(shè)計稿中的單位為 px

原理

雖然單位不同，但是元素所占屏幕寬度的比例是相同的
利用元素所占屏幕比例不變的特性，來將 px 轉(zhuǎn)為 dp（這樣實現(xiàn)屏幕適配的話，在不同尺寸的屏幕下，元素會等比放大或縮?。?/p>

公式如下：

設(shè)計稿元素寬度（px） / 設(shè)計稿總寬度（px） = 元素的寬度（dp） / 屏幕的總寬度（dp）

我們要求的就是 元素的寬度（dp）

可以得出：

元素的寬度（dp） = 設(shè)計稿元素寬度（px）* 屏幕的總寬度（dp） / 設(shè)計稿總寬度（px）

代碼實現(xiàn)

// util.js
import { Dimensions } from 'react-native';

// 設(shè)備寬度，單位 dp
const deviceWidthDp = Dimensions.get('window').width;

// 設(shè)計稿寬度（這里為640px），單位 px
const uiWidthPx = 640;

// px 轉(zhuǎn) dp（設(shè)計稿中的 px 轉(zhuǎn) rn 中的 dp）
export const pTd = (uiElePx) => {
 return uiElePx * deviceWidthDp / uiWidthPx;
}

使用

每次給元素設(shè)置尺寸樣式時，使用 pTd() 函數(shù)即可（傳入設(shè)計稿中元素的實際 px）。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • React state狀態(tài)屬性詳細講解

    React state狀態(tài)屬性詳細講解

    React將組件（component）看成一個狀態(tài)機（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實現(xiàn)并與用戶交互，維持組件的不同狀態(tài)
    2022-09-09
  • React?Native?加載H5頁面的實現(xiàn)方法

    React?Native?加載H5頁面的實現(xiàn)方法

    這篇文章主要介紹了React?Native?加載H5頁面的實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-04-04
  • react中fetch之cors跨域請求的實現(xiàn)方法

    react中fetch之cors跨域請求的實現(xiàn)方法

    本篇文章主要介紹了react中fetch之cors跨域請求的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • React?實現(xiàn)爺孫組件間相互通信

    React?實現(xiàn)爺孫組件間相互通信

    這篇文章主要介紹了React實現(xiàn)爺孫組件間相互通信，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
    2022-08-08
  • 使用webpack5從0到1搭建一個react項目的實現(xiàn)步驟

    使用webpack5從0到1搭建一個react項目的實現(xiàn)步驟

    這篇文章主要介紹了使用webpack5從0到1搭建一個react項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • React之關(guān)于Promise的用法

    React之關(guān)于Promise的用法

    這篇文章主要介紹了React之關(guān)于Promise的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-02-02
  • 關(guān)于react 父子組件的執(zhí)行順序

    關(guān)于react 父子組件的執(zhí)行順序

    這篇文章主要介紹了關(guān)于react 父子組件的執(zhí)行順序，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • react頁面中存在多個input時巧妙設(shè)置value屬性方式

    react頁面中存在多個input時巧妙設(shè)置value屬性方式

    這篇文章主要介紹了react頁面中存在多個input時巧妙設(shè)置value屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • 基于useImperativeHandle的使用解析

    基于useImperativeHandle的使用解析

    這篇文章主要介紹了基于useImperativeHandle的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • 詳解一個基于react+webpack的多頁面應(yīng)用配置

    詳解一個基于react+webpack的多頁面應(yīng)用配置

    這篇文章主要介紹了詳解一個基于react+webpack的多頁面應(yīng)用配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論