资讯专栏INFORMATION COLUMN

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

whinc / 2263人阅读

摘要:前言可以开发和的,在开发过程中,势必会遇上屏幕适配好几种尺寸的屏幕以及各种尺寸的屏幕的问题,下面介绍一种几行代码搞定适配的方法屏幕适配的前置知识中的尺寸单位为,而设计稿中的单位为原理虽然单位不同,但是元素所占屏幕宽度的比例是相同的利用元素所

前言

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)。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/17063.html

相关文章

  • React Native 屏幕适配炒鸡简单方法

    摘要:前言可以开发和的,在开发过程中,势必会遇上屏幕适配好几种尺寸的屏幕以及各种尺寸的屏幕的问题,下面介绍一种几行代码搞定适配的方法屏幕适配的前置知识中的尺寸单位为,而设计稿中的单位为原理虽然单位不同,但是元素所占屏幕宽度的比例是相同的利用元素所 前言 React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 ...

    WilsonLiu95 评论0 收藏0
  • React Native移动开发实战-4-Android平台适配

    摘要:但是,想要进一步理解的适配,有必要先了解适配的一些基本概念屏幕尺寸屏幕尺寸是指手机屏幕对角线的英寸数。屏幕像素密度屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。 打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示。 showImg(h...

    yacheng 评论0 收藏0
  • React Native图片资源使用优美方案

    摘要:图片资源作为与用户交互的界面元素,在客户端产品中起到了非常重要的角色作用。在应用开发中,移动端与的图片使用策略也有所不同。端较大的内存容量,快速的渲染能力使各类型图片资源都能得到较好的使用。图片资源( jpeg、png、svg、webp ... )作为与用户交互的界面元素,在客户端产品中起到了非常重要的角色作用。在应用开发中,移动端与PC的图片使用策略也有所不同。PC端较大的内存容量,快速的...

    fireflow 评论0 收藏0
  • 关于移动端适配,你必须要知道

    摘要:需要注意,上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指,一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度,我们通常使用如下的方法计算的为,那它每英寸约含有个物理像素点。导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... ...

    yibinnn 评论0 收藏0
  • React Native 在 Airbnb(译文)

    摘要:声明有助于保持我们的同步与底层状态的声明性质。值得注意的是,这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接,用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android,iOS,Web和跨平台框架的横向对比中,React Nativ...

    kevin 评论0 收藏0

发表评论

0条评论

whinc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<