知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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的適配-最新評論

    老子是皇帝在线客服