rn尺寸处理

最新推荐文章于 2024-06-25 16:27:34 发布

夜幕下的湖水

最新推荐文章于 2024-06-25 16:27:34 发布

阅读量3k

点赞数

分类专栏： react native 文章标签： rn

本文链接：https://blog.csdn.net/wwl901215/article/details/78632477

版权

本文总结了在react native项目中如何进行屏幕尺寸和文字大小的适配，主要参考了同事的封装文件和博客。以iPhone 6（750*1334px，像素密度2）为设计基准，介绍了px、dp、ppi的概念及其转换公式，并指出rn开发中需要将px转换为dp。文章表示会进一步完善内容。

摘要由CSDN通过智能技术生成

react native 屏幕尺寸和文字大小适配（项目总结，参照同事封装的文件和博客）

http://blog.csdn.net/u011272795/article/details/73824558
一般UI切图都会根据指定的屏幕大小和屏幕密度来设计，我们这个项目以iphone 6（750*1334 单位px，像素密度2）为准；

一般设备像素密度：
 设备的像素密度，例如：
 PixelRatio.get() === 1          mdpi Android 设备 (160 dpi)
 PixelRatio.get() === 1.5        hdpi Android 设备 (240 dpi)
 PixelRatio.get() === 2          iPhone 4,

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夜幕下的湖水

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

RN6752M单路AHD转MIPI功能芯片方案规格书,RN6752M高清视频解码器数据手册

07-05

RN6752M采用小型化设计，封装尺寸仅为6mm x 6mm的48引脚QFN封装，这使其能够适应空间有限的汽车内部环境。此外，该芯片还具备一定的兼容性和灵活性，可以适应不同的视频格式，并且通过I2C接口可以进行配置和控制，以...

RN(React Native)

weixin_73416102的博客

11-25

5746

使用RN组件库,以及打包webapp,可下载至手机

2 条评论您还未登录，请先登录后发表或查看评论

RN 简介

qq_46070577的博客

06-23

3225

React Native组件的生命周期和react组件的生命周期一致。三、学习网址 React Native中文网React Native 介绍React Native基础知识react Native百度百科

RN踩坑心得第四弹，RN版本升级与优化

02-12

1万+

说明 RN需要一个JS的运行环境，在IOS上直接使用内置的javascriptcore，在Android 则使用webkit.org官方开源的jsc.so。此外还集成了其他开源组件，如fresco图片组件，okhttp网络组件等。 RN 会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle), , RN的整体框架目标就是为了解释运行这个js 脚本文件，如果是js 扩展的API，则直接通过bridge调用native方法; 如果是UI

RN8302B用户手册

04-22

手册中描述了RN8302B的物理封装，包括尺寸、引脚布局等信息，这对于PCB设计和组装工艺是必要的。接下来是根据手册内容提炼出的详细知识点： - 电源监测功能可以让系统在电力参数异常时做出响应，例如，当电源电压...

四通道AHD模拟高清转MIPI输出视频解码芯片RN6864M规格书.pdf

01-20

RN6864M是一款四通道高清视频解码芯片，专为将AHD模拟高清视频信号转换成MIPI ...总的来说，RN6864M是一个关键的组件，能够实现高清模拟视频向数字MIPI CSI-2格式的转换，对于构建高效、高质量的视频处理系统至关重要。

RN6752 datasheet和参考设计原理图

05-17

3. **封装信息**：描述芯片的物理尺寸和引脚布局，以便在电路板上正确放置和连接。 4. **功能描述**：详述每个引脚的功能，以及如何配置和使用它们。 5. **操作模式**：包括休眠、接收、传输等不同工作模式的描述...

[RN]xxxx/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

老汉带你推推推

08-08

1155

xxxx/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit Could not load: libgnustl_shared.so Could not load: libglog.so Could not load: libglog_init.so Could not load: libreactna...

React Native入门（十一）之屏幕适配

苦逼的程序猿☺

10-26

5601

准备首先，我们在官方文档宽度和高度一节可以知道，RN中单位是dp，这个跟Android中的单位是一致的！官网中：A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp: dp = (width in pixels * 160) / screen density这里的 screen

移动端1px的解决方法

大灰狼的小绵羊哥哥的博客

04-06

3226

在上个项目中，移动端1px问题被困扰了好久，设置1px边框，实际显示2px。https://hzzly.github.io/2017/03/13/%E7%A7%BB%E5%8A%A8%E7%AB%AF1px%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/ 以下是我在项目中的解决方法，才疏学浅，轻喷。关于什么是移动端1像素边框问题，先上两张图

React-Native 1px处理

大灰狼的小绵羊哥哥的博客

07-18

1613

当UI设计图上标注某间距为1px时，只需在间距设置的地方填如下值： import { View, StyleSheet, PixelRatio, } from 'react-native' //要用到 PixelRatio.get() 则需从react-native组件中引用 PixelRatio 1px 项目中数值表示：1 / PixelRatio.get() 作者：oc...

React Native 布局浅探

weixin_34301307的博客

07-15

134

简述在Web开发中，页面布局基于盒子模型，主要通过定位属性、浮动属性和显示属性实现。而React Native采用的是Flex布局，但也支持盒子模型的margin、padding以及定位属性进行布局。 flex布局定义以一张图片来大致了解flex布局的思想 flex布局实例对于flex各种布局方式的实现可以参见这篇文章移动端全兼容...

ReactNative项目构建分析与思考之RN组件化

喻志强的博客

03-23

1445

结合RN项目的构建分析，给出一种RN组件化的项目搭建方式。

RN开发初探与踩坑心得

shouhengboy的博客

05-16

1018

本人近期才开始接触RN开发，在开发环境搭建就遇到一些问题，于是将这阵子折腾的心得整理成本此文。本文从环境搭建，一直讲到热更新包的制作，到此应该就已经掌握RN完整项目的关键技术了，然后就可以进入正式的开发阶段了。

RN通信底层原理 -- 总结篇

m0_49508485的博客

01-22

4294

Facebook 曾在 2018 年 6 月宣布了大规模重构 RN 的计划和路线图，整个的重构目的是为了让 RN 更轻量化、更适应混合开发，接近甚至达到原生的体验。而新架构的技术核心则是JSI，Turbomodule 也正是基于它来实现的。介于期望大家能够一起更深入的理解 RN 新架构的亮点，接下来的分享将会从旧架构和新架构的底层实现开始入手，冒泡式的逐一了解RN框架的原理。一、Java调用C++ ：JNI 众所周知，JNI 是实现 C++ 与 Java 不...

RN5T567电源管理芯片功能详解与应用

11. **包信息**：RN5T567采用QFN0606-48和QFN0707-48封装，具有小巧的尺寸和高密度的引脚排列，适合在空间有限的电子产品中使用。 12. **引脚描述**：每个引脚都有特定的功能，如电源输入、输出、控制信号、中断...