react native 不同分辨率、dpi适配思考

已于 2022-02-18 09:37:18 修改
阅读量2k 收藏 3
点赞数
分类专栏： react native 文章标签： react native
于 2021-07-13 21:07:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39753511/article/details/118669695
版权

1 参考3

屏幕适配理论知识

React native 分辨率适配(px,dp)

react-native android 适配全面屏手机

谷歌官方Android设备系统及屏幕分辨率统计信息汇总）

2 当前市面主流 手机分辨率分析（2021-7-12）

3 华为、小米

  • 分辨率： 2400 * 1080
  • dpi ：360、398、 420

vivo、oppo

  • 分辨率 ：2400x1080
  • 高端机型dpi: 400
  • 千元机

  • 分辨率：1600x720像素

  • dpi：269

关于适配你需要做的工作

  • 字体大小的适配
  • 高度的适配

4 结论

  • 我们可以看到再宽度上国产手机大多都是：1080。最重要的是需要做到：宽度固定，高度自适应

  • 按照目前手机的发展趋势来说，以后手机肯定大部分的分辨率应该都是：分辨率：2400x1080 、DPI 400 的环境下开发。

  • 我所安装的模拟器

在这里插入图片描述

未金涛
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react网页适配不同分辨率_react-native 适配设备分辨率问题
weixin_39675038的博客
12-19 148
同一文件夹下,分别新建以下几个文件：新建global.js文件，代码如下：import { Dimensions, PixelRatio, Platform, Alert } from 'react-native';import HttpUtils from './HttpUtils'import FontSize from './TextSize'import {px2dp} from './P...
DPI、像素与分辨率的区别和联系
热门推荐
wangwenjing90的专栏
04-12 7万+
DPI（Dot Per Inch） 表示打印分辨率，指每英寸长度上的点数。DPI 又可细分为水平分辨率和垂直分辨率，例如一张 “1英寸*1英寸” （1英寸=2.54cm）的图片，如果它的水平分辨率是100 dpi，垂直分辨率是50 dpi，那么就是说，它水平每英寸分成100小段，垂直每英寸分成50小段，就像米尺上的一格格那样。那么这张图总共有100*50=5000个格子，这张图片共有5000像素。
ReactNative屏幕适配工具
08-10
React Native屏幕适配工具
React Native 之 像素比例（十七）
最新发布
qq_35876316的博客
05-28 513
在 React Native 中，。像素比（或称为设备像素密度、DPI 密度等）是物理像素和设备独立像素（DIPs 或 DPs）之间的比率。设备独立像素是一种抽象的度量单位，使得开发者可以编写不依赖于特定屏幕分辨率的代码。
React native 分辨率适配
大灰狼的小绵羊哥哥的博客
05-30 5859
React Native中使用的尺寸单位是pt，是一个绝对长度，而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了PixelRatio: http://www.jianshu.com/p/7836523b4d20?utm_source=tuicool&utm_medium=referral import {PixelRatio} from 'react-native'; cons
ReactNative屏幕适配解决方案
kakaxiqianxin的专栏
06-12 9198
ReactNative也是以pt为单位的，这种单位会导致界面变形 先上界面布局 render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! &...
iphone分辨率_安卓手机进入90 Hz流畅时代，靠物理“外挂”能击败iPhone吗？
weixin_39831170的博客
10-25 138
9月份开启的新机潮还在继续，今天(10月15日)上午，realme发布X2Pro，售价2599元起；下午，一加发布OnePlus 7T和7T Pro，售价2999元起。除了拥有骁龙855 Plus这样的顶级SOC，两者还有一个共同特点——90Hz屏幕。realmeX2 Pro采用6.5英寸三星Super AMOLED水滴屏，最高亮度1000尼特，对比度200万:1。OnePlus7T...
详解React Native 屏幕适配（炒鸡简单的方法）
08-27
在使用React Native进行跨平台移动应用开发时，屏幕适配是一项关键任务，因为iOS和Android设备的屏幕尺寸和分辨率各异。本文将详细介绍一种简洁的方法来处理React Native的屏幕适配问题。 首先，我们需要理解React ...
React Native 的 WiFi 连接管理器
06-08
React Native 的 WiFi 管理器 (react-native-wifi-manager) 列出、连接并获取设备上 WiFi 连接的状态。 安装 首先需要安装 react-native-wifi-manager: npm install react-native-wifi-manager --save 在 android/...
React Native 计算器和计算器输入组件
06-08
安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import React from 'react' import { View } from 'react-native' import { ...
react-native-performance：监视和衡量React Native性能
02-05
React Native Performance工具用于在开发，管道和生产中测量和监视React Native应用性能的工具链。配套 用于React Native的实现。 与React.Profiler API很好地集成跟踪应用程序中的任意事件，例如组件渲染时间捕获...
native字体尺寸自适应 react_React Native之图片/宽高/字体平台适配
weixin_39766109的博客
12-20 141
Platform.OS为了提高代码的兼容性，我们有时需要判断当前系统的平台，然后做一些适配。比如，我们在使用 StatusBar做导航栏的时候，在 iOS平台下根视图的位置默认情况下是占据状态栏的位置的，我们通常希望状态栏下面能显示一个导航栏，所以我们需要为 StatusBar的外部容器设置一个高度;留意api doc的android或ios标识并不是所有reactNative的一些 ...
关于react-native的适配与布局方式
王天泽的博客
09-03 3783
个人比较倾向于利用屏幕宽度和高度以及relative相对距离来布局。/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react'; import { AppRegistry, StyleSheet
react native 像素适配
帥潔的博客
05-16 421
RN 像素适配
ReactNative进阶（四十四）：Mobile App 适配性优化_react native 适配
2401_84446712的博客
05-08 863
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如）实现的应用情形中，适配性问题同样值得深思。
React-Native 屏幕适配的问题
大灰狼的小绵羊哥哥的博客
11-28 972
1. 前言 在使用react-native进行开发的时候我们参见官方文档知道做屏幕适配是使用flexBox来进行布局. 戳我查看 flexBox 布局 有关flexBox的属性这里不做太多介绍,不会的请参考官方文档.这里只是说一下在做屏幕适配的时候发现仅仅使用flexBox还有点不太够用~ 在react-native中我们使用StyleSheet这个对象来进行样式的开发.示例代码如下所示: import { StyleSheet } from "react-native"; // ...
react-native 屏幕尺寸和文字大小适配
卓原的进化之旅
06-27 3万+
  现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同， 比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则，...
React-Native中屏幕的适配问题
Allenace-的博客
03-21 7254
React-Native中屏幕的适配问题
React Native 屏幕适配（炒鸡简单的方法）
weixin_33756418的博客
06-10 382
前言 React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕）的问题，下面介绍一种几行代码搞定 RN 适配的方法！ 屏幕适配的前置知识 RN 中的尺寸单位为 dp，而设计稿中的单位为 px 原理 虽然单位不同，但是元素所占屏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值