《React-Native系列》 API模块之PixelRatio和Dimensions

本文主要是介绍《React-Native系列》 API模块之PixelRatio和Dimensions,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

PixelRatio和Dimensions 是ReactNative提供的API,这个在我们编写RN页面的时候必须要使用的。

PixelRatio

我们还是先看看官网怎么介绍的。

PixelRatio类提供了访问设备的像素密度的方法。

根据像素密度获取指定大小的图片
如果应用运行在一个高像素密度的设备上,显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比:

[javascript]  view plain copy
在CODE上查看代码片 派生到我的代码片
  1. var image = getImage({  
  2.   width: PixelRatio.getPixelSizeForLayoutSize(200),  
  3.   height: PixelRatio.getPixelSizeForLayoutSize(100),  
  4. });  
  5. <Image source={image} style={{width: 200, height: 100}} />  
译注: 这段代码的意思是,如果你要在屏幕上摆放一个宽200高100的图片,那么首先要准备多个分辨率尺寸的图。PixelRatio.getPixelSizeForLayoutSize(200)方法会根据当前设备的pixelratio返回对应值,比如当前设备的pixelratio为2,则返回 200 * 2 = 400,最后生成的参数为{ width: 400, height: 200 },然后开发者自己实现getImage方法,根据这一参数,返回最符合此尺寸的图片地址。


方法
static get() 

返回设备的像素密度,例如:
PixelRatio.get() === 1      mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5   hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2     iPhone 4, 4S    iPhone 5, 5c, 5s     iPhone 6      xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3     iPhone 6 plus   xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5   Nexus 6

static getFontScale() 
返回字体大小缩放比例。这个比例可以用于计算绝对的字体大小,所以很多深度依赖字体大小的组件需要用此函数的结果进行计算。
如果没有设置字体大小,它会直接返回设备的像素密度。
目前这个函数仅仅在Android设备上实现了,它会体现用户选项里的“设置 > 显示 > 字体大小”。在iOS设备上它会直接返回默认的像素密度。

static getPixelSizeForLayoutSize(layoutSize: number) 
将一个布局尺寸(dp)转换为像素尺寸(px)。
一定会返回一个整数数值。

static startDetecting() 
// 本函数在移动设备上没有作用。


注意点:

1、使用最多的还是PixelRatio.get()  获取像素密度这个方法。

UI一般给出的设计稿单位都是px,那我们RN中的单位是dp,那么我们就需要将px转换为dp,这就需要使用像素密度了。

px = dp / PixelRatio.get() .

这样适配UI的时候,就会比较麻烦。目前我还没想到什么好方法,统一的都像素密度都按2来处理的。


Dimensions

我们也还是先来看看官网怎么说的。

本模块用于获取设备屏幕的宽高。

所提供的方法如下:
static set(dims: {[key:string]: any}) 
这个函数只应该被原生代码调用。.
@param {object} dims 一个简单的字符串作为key的对象,包含了需要设置的尺寸信息。

static get(dim: string) 
初始的尺寸信息应该在runApplication之后被执行,所以它可以在任何其他的require被执行之前就可用。不过在稍后可能还会更新。
注意:尽管尺寸信息立即就可用,但它可能会在将来被修改(譬如设备的方向改变),所以基于这些常量的渲染逻辑和样式应当每次render之后都调用此函数,而不是将对应的值保存下来。(举例来说,你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸)。

例子:var {height, width} = Dimensions.get('window');
@param {string} dim 想要获取的尺寸信息的字段名。
@returns {Object?} 返回的尺寸信息值。


注意点:

1、我们使用Dimensions主要还是用来获取屏幕的width和height,不同设置的width和height当然会不同。

小技巧:我们可以将像素密度和width、height封装成一个公用的js,这样不用每个页面都引用PixelRatio和Dimensions。

[javascript]  view plain copy
在CODE上查看代码片 派生到我的代码片
  1. import React from 'react';  
  2. import {  
  3.  StyleSheet,  
  4.  Dimensions,  
  5.  PixelRatio,  
  6. } from 'react-native';  
  7.   
  8. export default {  
  9.     "pixelRatio" : PixelRatio.get(),  
  10.     "width" : Dimensions.get('window').width,  
  11.     "height" : Dimensions.get('window').height,  
  12. }  

参考:http://reactnative.cn/docs/0.31/dimensions.html#content

这篇关于《React-Native系列》 API模块之PixelRatio和Dimensions的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/510352

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②