react-native如何将UI设计稿上的原型的大小转换为开发大小,还能实现各种屏幕自适应

原型设计稿:

    

输入框

    高度:150;

    宽带:900;

如何将原型上px单位转为react-native的dp单位?

    1、原型宽度/设备dp宽度 = px和dp的比例;

    2、原型宽度可以通过ps获取到:1080;

    3、设备的dp宽度 dp; 

        var {height, width} = Dimensions.get('window');

上图原型输入框宽高通过转换:

    宽:900 * dp/1080;

    高:150 * dp/1080;

   得到的值就给设备对应UI设置宽高了


猜你喜欢

转载自blog.csdn.net/zdluoa/article/details/79764550