详解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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
express如何使用session与cookie的方法
Jan 30 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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php向js函数传参的几种方法
2014/08/10 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python使用scrapy解析js示例
2014/01/23 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python编程开发之日期操作实例分析
2015/11/13 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Django REST 异常处理详解
2020/07/15 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
联想C++笔试题
2012/06/13 面试题
大学学生会竞选演讲稿
2014/04/25 职场文书
给校长的建议书600字
2014/05/15 职场文书
委托书的样本
2015/01/28 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
海弦WR-800F
2022/04/05 无线电