详解React Native 屏幕适配(炒鸡简单的方法)


Posted in Javascript onJune 11, 2018

前言

React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕)的问题,下面介绍一种几行代码搞定 RN 适配的方法!

屏幕适配的前置知识

RN 中的尺寸单位为 dp,而设计稿中的单位为 px

原理

虽然单位不同,但是元素所占屏幕宽度的比例是相同的
利用元素所占屏幕比例不变的特性,来将 px 转为 dp(这样实现屏幕适配的话,在不同尺寸的屏幕下,元素会等比放大或缩小)

公式如下:

设计稿元素宽度(px) / 设计稿总宽度(px) = 元素的宽度(dp) / 屏幕的总宽度(dp)

我们要求的就是 元素的宽度(dp)

可以得出:

元素的宽度(dp) = 设计稿元素宽度(px)* 屏幕的总宽度(dp) / 设计稿总宽度(px)

代码实现

// util.js
import { Dimensions } from 'react-native';

// 设备宽度,单位 dp
const deviceWidthDp = Dimensions.get('window').width;

// 设计稿宽度(这里为640px),单位 px
const uiWidthPx = 640;

// px 转 dp(设计稿中的 px 转 rn 中的 dp)
export const pTd = (uiElePx) => {
 return uiElePx * deviceWidthDp / uiWidthPx;
}

使用

每次给元素设置尺寸样式时,使用 pTd() 函数即可(传入设计稿中元素的实际 px)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
vue非父子组件通信问题及解决方法
Jun 11 #Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 #Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
Node.js中的cluster模块深入解读
Jun 11 #Javascript
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php批量上传的实现代码
2013/06/09 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
jQuery操作cookie
2016/08/08 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
详解Python传入参数的几种方法
2019/05/16 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
如何用Python绘制3D柱形图
2020/09/16 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
党员教师工作决心书
2014/03/13 职场文书
节能环保口号
2014/06/12 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS