详解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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
JavaScript中import用法总结
Jan 20 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue.js实现照片放大功能
Jun 23 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
php 数组二分法查找函数代码
2010/02/16 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
js下弹出窗口的变通
2007/04/18 Javascript
javascript引导程序
2008/10/26 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python 绘制国旗的示例
2020/09/27 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python