React Native自适应设备宽度解决方案
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自适应设备宽度解决方案的更多相关文章
- 【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)
),React Native技术交流4群(458982758),请不要反复加群.欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
- 使用 rem 作为单位使页面自适应设备宽度
一.新建 rem.js 文件,代码如下: export default function () { document.documentElement.style.fontSize = document ...
- 从React Native到微服务,落地一个全栈解决方案
Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...
- React Native的环境搭建以及开发的IDE
(一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...
- 【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
随机推荐
- linux 安装 mysql-5.6.26
linux安装mysql-5.6.26 查看工具:winscp 下载地址 http://mirrors.sohu.com/mysql/MySQL-5.6/ 文件: mysql-5.6.26-linux ...
- python 异常处理、进程
目录: 异常处理 python进程 python并发之多进程 一.异常处理(try...except...) 1.程序中难免出现错误,而错误分成两种: a.语法错误: b.逻辑错误(逻辑错误) 2.异 ...
- Cocos2d-JS实现的贪吃蛇
一.前言 相信贪吃蛇大家都玩儿过,我对贪吃蛇的印象就是在电子词典上,一只像素蛇在屏幕游走,饥渴难耐,看着豆子就要去吃,吃到豆子就会长一节,当蛇的身体越来越长的时候,它才发现这个世界变了,每走一步,都是 ...
- 通过前端控制器源码分析springmvc的执行过程
第一步:前端控制器接收请求调用doDiapatch 第二步:前端控制器调用处理器映射器查找 Handler 第三步:调用处理器适配器执行Handler,得到执行结果ModelAndView 第四步:视 ...
- uva 1048 最短路的建图 (巧,精品)
大白书 P341这题说的是给了NT种飞机票,给了价钱和整个途径,给了nI条要旅游的路线.使用飞机票都必须从头第一站开始坐,可以再这个路径上的任何一点下飞机一但下飞机了就不能再上飞机,只能重新买票,对于 ...
- react headtop title 截取
render() { const nav = this.props.nav const text = nav && nav.length > 5 ? this.strHandle ...
- springcloud12---sidecar
Sidecar:异构平台整合.做了一个桥 package com.itmuch.cloud; import org.springframework.boot.SpringApplication; im ...
- # 20145106 《Java程序设计》第3周学习总结
教材学习内容总结 在本周的学习中,我看到了这样一句话:"使用java撰写程序几乎都是在使用对象(object),要产生对象必须先定义类(class),类是对象的设计图,对象是类的实例(ins ...
- 实验五分析system_call中断处理过程
一.实验要求: 1.使用gdb跟踪分析一个系统调用内核函数 2.根据本周所学知识分析系统调用的过程,从system_call开始到iret结束之间的整个过程,并画出简要准确的流程图 二.实验步骤: 1 ...
- git使用合集
1.git 克隆时重命名本地文件夹或目录 如:git clone https://github.com/torvalds/linux.git linux_kernel 2.git查看tag git t ...