react native学习笔记19——常用API(1)Dimensions、PixelRatio获取屏幕宽高及单位换算
来源:互联网 发布:最终幻想mac版 编辑:程序博客网 时间:2024/05/16 00:33
Dimensions
在React Native中通常使用Dimensions获取屏幕宽高。
Dimensions的方法
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?} 返回的尺寸信息值。
具体实例
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Dimensions, } from 'react-native';export default class DimensionsDemo extends Component { render() { return ( <View style={styles.container}> <Text style={styles.instructions}> width:{Dimensions.get('window').width} </Text> <Text style={styles.instructions}> height:{Dimensions.get('window').height} </Text> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, },});
在小米5上运行结果如下:
这里不禁有个疑问了,这个宽360、高640,它们的长度单位是什么?Android开发的朋友可能会微微一笑,360X640这个组合再熟悉不过了,不错,React Native默认的长度单位为dp(device independent pixels)设备独立像素,也称dip。Android开发布局时常常采用dp作为控件的长度单位。
单位转换
- px (pixels)像素
对应屏幕上的实际像素点。 - dp (device independent pixels)设备独立像素,也称dip
逻辑长度单位,在 160 dpi 屏幕上,1dp=1px=1/160英寸。随着密度变化,对应的像素数量也变化。它和设备硬件有关,不依赖像素。
dp 与 px 有一个关于 (160/screen density) 的正相关的关系:
1dp = 1物理px (screen density = 160)1dp = 2物理px (screen density = 320)1dp = 3物理px (screen density = 480)
dp与px的关系为:1dp = 1px * (160/screen density)
这里 (160/screen density) 实际上就是我们后面要介绍的pixelRatio。
PixelRatio
PixelRatio类提供了访问设备的像素密度的方法。
PixelRatio的方法
static get()
返回设备的像素密度。例如:
static getFontScale()
返回字体大小缩放比例。这个比例可以用于计算绝对的字体大小,所以很多深度依赖字体大小的组件需要用此函数的结果进行计算。
如果没有设置字体大小,它会直接返回设备的像素密度。
目前这个函数仅仅在Android设备上实现了,它会体现用户选项里的设置(设置 > 显示 > 字体大小)。在iOS设备上它会直接返回默认的像素密度。static getPixelSizeForLayoutSize(layoutSize: number)
将一个布局尺寸(dp)转换为像素尺寸(px)。
一定会返回一个整数数值。
具体实例
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, PixelRatio, } from 'react-native';export default class PixelRatioDemo extends Component { render() { return ( <View style={styles.container}> <Text style={styles.content}> pxielRatio={PixelRatio.get()} </Text> <Text style={styles.content}> {PixelRatio.getPixelSizeForLayoutSize(200)} </Text> <Text style={styles.content}> {200*PixelRatio.get()} </Text> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, content: { textAlign: 'center', color: '#333333', marginBottom: 5, },});
还是用小米5测试:
可以看到getPixelSizeForLayoutSize的结果与我们自己计算的结果相同,验证了:
1dp = 1px * pixelRatio
- react native学习笔记19——常用API(1)Dimensions、PixelRatio获取屏幕宽高及单位换算
- 《React-Native系列》12、 API模块之PixelRatio和Dimensions
- 《React-Native系列》 API模块之PixelRatio和Dimensions
- 《React-Native系列》 API模块之PixelRatio和Dimensions
- React Native-16.React Native 常用API及实践 PixelRatio
- react native PixelRatio获取像素密度
- react native学习笔记21——常用API(3)Geolocation定位、Keyboard键盘
- react-native PixelRatio
- 【React Native】StyleSheet获取屏幕的宽高
- react native学习笔记20——常用API(2)AppState应用前后台、NetInfo网络状态
- 计算机常用单位,及单位换算
- React Native 学习笔记(六) -- 组件的宽和高及flexbox布局
- react native 学习笔记之指定样式,宽,高
- react native 学习笔记之指定样式,宽,高
- (原) react native 获取view宽高
- React Native 获取设备的宽高
- Android菜鸟学习笔记(获取屏幕宽、高)
- React-Native 获取屏幕尺寸
- Android项目亮点
- LeetCode 27.Remove Element
- Lintcode175 Invert Binary Tree solution 题解
- HDU1017
- 产品经理内功修炼——产品的界面框架设计
- react native学习笔记19——常用API(1)Dimensions、PixelRatio获取屏幕宽高及单位换算
- 【Scikit-Learn 中文文档】预测目标 (y) 的转换
- 网络安全实验iptables
- 大数计算优化
- Spark JobServer简介
- webstorm+nodejs express框架实现邮件前端分离
- 数组交换;二进制转换;最大公因数;最小公倍数
- Could not resolve placeholder 'apiId' in value "${apiId}"
- C++ Multithreading Cookbook.pdf 英文原版 免费下载