<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

      懶人建站提供網頁素材下載、網站模板
      知識 分享 互助!

      React Native不同設備分辨率適配和設計稿尺寸單位px的適配

      作者:不吃魚的貓 2018-02-22 人氣:
      React Native不同設備分辨率適配和設計稿尺寸單位px的適配,設計師給的稿子都是按照px像素單位設計的,這個時候我們怎么快速還原設計稿那?下面代碼實現React Native設計稿尺寸單位px與pt單位的自動轉換適配。

      React Native不同設備分辨率適配和設計稿尺寸單位px的適配,設計師給的稿子都是按照px像素單位設計的,這個時候我們怎么快速還原設計稿那?

      React Native中使用的尺寸單位是dp(一種基于屏幕密度的抽象單位。在每英寸160點的顯示器上,1dp = 1px),而設計師使用的是px, 這兩種尺寸如何換算呢?

      官方提供了PixelRatio進行pt到px的轉換

      import {PixelRatio} from 'react-native';
      const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);
      const px2dp = px=>PixelRatio.roundToNearestPixel(px);

      設計師給你一個尺寸,比如100px*200px的View,按照下面的方式可實現設計還原:

      View style={{width:px2dp(100),height:px2dp(200),backgroundColor:"red"}}

      如果每個地方都這樣寫會很麻煩,于是我們就有了下面轉換代碼

      import {PixelRatio,Dimensions}} from 'react-native';
      const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);
      const px2dp = px=>PixelRatio.roundToNearestPixel(px);
      let designSize = {width:720,height:1280}; //假設設計尺寸為:720*1280
      let pxRatio = PixelRatio.get();
      let win_width = Dimensions.get("window").width;
      let win_height = Dimensions.get("window").height;
      let width = dp2px(win_width);
      let height = dp2px(win_height);
      let design_scale = designSize.width/width;
      height = height*design_scale
      let scale = 1/pxRatio/design_scale;

      實際使用:

      要在最外層View上設置如下樣式:

      const styles = StyleSheet.create({
          container: {
              width: width,
              height: height,
              transform: [{translateX: -width * .5}, {translateY: -height * .5}, {scale: scale}, {translateX: width * .5}, {translateY: height * .5}]
          }
      });

      在后續的開發中將不必再關注適配的問題,只需要按照設計師給的尺寸實現布局即可,比如設計稿中的圖片尺寸是300px*300px,你的樣式中就寫 width: 300,height: 300,

      這里就寫設計稿上的300px 300px,不用帶單位
      image: {
              width:300,
              height:300
          }

      原文:https://www.jianshu.com/p/7836523b4d20  詳細描述可以查看原文

      ↓ 查看全文

      React Native不同設備分辨率適配和設計稿尺寸單位px的適配由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

      懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

      React Native不同設備分辨率適配和設計稿尺寸單位px的適配-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>