px:设备实际像素单位

dp/pt:逻辑像素单位(IOS的尺寸单位为pt,Android的尺寸单位为dp)

在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。

UI 给默认 640 的图,采用 pxToDp 函数,即可将 UI 等比放大到机器上。

import {Dimensions} from 'react-native';

// 58 app 只有竖屏模式,所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width;
// UI 默认给图是 640
const uiWidthPx = 640; function pxToDp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx;
} export default pxToDp;

调用方法

import pxToDp from './pxToDp';

...
<View style={{width:pxToDp(100),height:pxToDp(100)}}></View>
... 参考网址:

React Native 的默认单位和自适应布局方案

react-native 之布局篇

移动端尺寸基础知识

 

React Native自适应设备宽度解决方案的更多相关文章

  1. 【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)

    ),React Native技术交流4群(458982758),请不要反复加群.欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  2. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  3. 使用 rem 作为单位使页面自适应设备宽度

    一.新建 rem.js 文件,代码如下: export default function () { document.documentElement.style.fontSize = document ...

  4. 从React Native到微服务,落地一个全栈解决方案

    Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...

  5. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  6. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  7. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  8. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  9. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

随机推荐

  1. linux 安装 mysql-5.6.26

    linux安装mysql-5.6.26 查看工具:winscp 下载地址 http://mirrors.sohu.com/mysql/MySQL-5.6/ 文件: mysql-5.6.26-linux ...

  2. python 异常处理、进程

    目录: 异常处理 python进程 python并发之多进程 一.异常处理(try...except...) 1.程序中难免出现错误,而错误分成两种: a.语法错误: b.逻辑错误(逻辑错误) 2.异 ...

  3. Cocos2d-JS实现的贪吃蛇

    一.前言 相信贪吃蛇大家都玩儿过,我对贪吃蛇的印象就是在电子词典上,一只像素蛇在屏幕游走,饥渴难耐,看着豆子就要去吃,吃到豆子就会长一节,当蛇的身体越来越长的时候,它才发现这个世界变了,每走一步,都是 ...

  4. 通过前端控制器源码分析springmvc的执行过程

    第一步:前端控制器接收请求调用doDiapatch 第二步:前端控制器调用处理器映射器查找 Handler 第三步:调用处理器适配器执行Handler,得到执行结果ModelAndView 第四步:视 ...

  5. uva 1048 最短路的建图 (巧,精品)

    大白书 P341这题说的是给了NT种飞机票,给了价钱和整个途径,给了nI条要旅游的路线.使用飞机票都必须从头第一站开始坐,可以再这个路径上的任何一点下飞机一但下飞机了就不能再上飞机,只能重新买票,对于 ...

  6. react headtop title 截取

    render() { const nav = this.props.nav const text = nav && nav.length > 5 ? this.strHandle ...

  7. springcloud12---sidecar

    Sidecar:异构平台整合.做了一个桥 package com.itmuch.cloud; import org.springframework.boot.SpringApplication; im ...

  8. # 20145106 《Java程序设计》第3周学习总结

    教材学习内容总结 在本周的学习中,我看到了这样一句话:"使用java撰写程序几乎都是在使用对象(object),要产生对象必须先定义类(class),类是对象的设计图,对象是类的实例(ins ...

  9. 实验五分析system_call中断处理过程

    一.实验要求: 1.使用gdb跟踪分析一个系统调用内核函数 2.根据本周所学知识分析系统调用的过程,从system_call开始到iret结束之间的整个过程,并画出简要准确的流程图 二.实验步骤: 1 ...

  10. git使用合集

    1.git 克隆时重命名本地文件夹或目录 如:git clone https://github.com/torvalds/linux.git linux_kernel 2.git查看tag git t ...