详解React Native 屏幕适配（炒鸡简单的方法）
更新时间：2018年06月11日 13:42:34 作者：hileix
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
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）。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 解决react-native软键盘弹出挡住输入框的问题
- react-native滑动吸顶效果的实现过程
- react native基于FlatList下拉刷新上拉加载实现代码示例
- react native 文字轮播的实现示例
- react-native动态切换tab组件的方法
- React Native 自定义下拉刷新上拉加载的列表的示例
- 详解react-native WebView 返回处理(非回调方法可解决)
- 详解如何在项目中使用jest测试react native组件
- 关于React Native报Cannot initialize a parameter of type''NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)
相关文章
这篇文章主要为大家介绍了Remix 路由模块输出对象handle函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
TypeScript通常都会依赖于框架，例如和vue、react 这些框架结合，本文就主要介绍了React项目中应用TypeScript的实现，分享给大家，具体如下：2021-09-09
react配置webpack-bundle-analyzer项目优化踩坑记录
这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了React中父子组件数据传递和修改的方式及原理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
JavaScript中的useRef 和 useState介绍
这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍，下列文章，我们将学习 useRef 和 useState hook是什么，它们的区别以及何时使用哪个。 这篇文章中的代码示例将仅涉及功能组件，但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了React SSR样式及SEO的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了react显示文件上传进度的示例，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了创建React项目并配置webpack,在这里需要注意，Create React App requires Node 14 or higher.需要安装高版本的node，本文给大家介绍的非常详细，需要的朋友参考下吧2022-01-01
这篇文章主要介绍了React状态提升案例，所谓 状态提升 就是将各个子组件的 公共state 提升到它们的父组件进行统一存储、处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
最新评论