Dimensions屏幕宽高

Dimensions库可以获取屏幕的宽高：

import { Dimensions } from 'react-native';const {height, width} = Dimensions.get('window'); // 可用显示屏幕的宽高，不包括顶部的状态信息栏
const {height, width} = Dimensions.get('screen'); // 整个显示屏幕的宽高，包括顶部的状态信息栏

如果屏幕发生旋转，如由竖屏变为横屏，则屏幕宽高值也会随着变化，可以通过'change'事件监听：

componentDidMount(){Dimensions.addEventListener('change', this._change);
}componentWillUnmount(){Dimensions.removeEventListener('change', this._change);
}// 当屏幕发生旋转时触发
_change = (e) => {console.log(e.window, e.screen);
}

PixelRatio屏幕像素密度

在RN开发中，在样式中设置宽高或坐标等值是不需要设置单位的，它们的默认单位是dips(device-independent pixels)。

dips：设备独立像素，称为布局尺寸。
px：物理像素，称为像素尺寸。

这里有个公式：

移动设备屏幕像素密度 = 像素尺寸 /  布局尺寸

那么我们知道这个公式有什么用呢？它可以用来计算高像素密度的设备上的图片尺寸精度，就是说，如果想要在移动设备上显示一张很大分辨率的照片原图尺寸(不经过缩放)，如5000px(像素尺寸)，由于在设备上默认单位并不是px，所以无法直接将宽高设为5000。这时就必须通过公式计算出布局尺寸，即在样式中宽高的赋值。

布局尺寸 = 像素尺寸 / PixelRatio.get()

PixelRatio.get() 为PixelRatio库提供了获取设备屏幕像素密度的函数。

PixelRatio库也提供了一个转换函数来获取像素尺寸：

const pxValue = PixelRatio.getPixelSizeForLayoutSize(dipsValue)； // 入参为布局尺寸，转换结果为像素尺寸。
等同于
像素尺寸 = 布局尺寸 * PixelRatio.get();

下面的例子展示了1个单位的布局尺寸dips和1个单位的像素尺寸px在显示上的区别：

import React from 'react';
import { View, Text, StyleSheet, PixelRatio } from 'react-native';class PixelRatioAPI extends React.Component {render(){return(<View style={styles.containerViewStyle}><View style={styles.dpViewStyle}><Text>1dp(布局尺寸)边框</Text></View><View style={styles.pxViewStyle}><Text>1px(像素尺寸)边框</Text></View></View>);}
}const styles = StyleSheet.create({containerViewStyle: {flex: 1,justifyContent: 'center',alignItems: 'center'},dpViewStyle: {height: 100,borderWidth: 1},pxViewStyle: {marginTop: 20,height: 100,borderWidth: 1/PixelRatio.get()}
});export default PixelRatioAPI;

效果：

react-native系列(24)API篇：屏幕宽高和屏幕像素密度相关推荐

React Native 学习笔记六（关于宽高的设置）
继续在之前的例子上进行添加尺寸 1.使用固定的尺寸设置View容器和设置自定义的组组件如果父组件的空间不足自控件的会出现重叠的情况示例: import {AppRegistry,S ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
android利用反射调用截屏api,Android利用反射机制调用截屏方法和获取屏幕宽高的方法...
想要在应用中进行截屏,可以直接调用 View 的 getDrawingCache 方法,但是这个方法截图的话是没有状态栏的,想要整屏截图就要自己来实现了. 还有一个方法可以调用系统隐藏的 screen ...
【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行 ...
Flutter使用ScreenUtil获取屏幕宽高初始化报错
报错如下原因我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是,在初始化未装载视图时,第一次获取时拿不到,会出现如上的崩溃. 解决方案 import 'package: ...
Android 获取屏幕宽高的正确姿势
前言在开发时,我们经常需要根据屏幕的宽高来进行对view的适配,无论是自定义view还是andorid自带的一些控件,比如说需要占当前屏幕高度的30%,就需要获取到屏幕的宽高,但在获取宽高时我遇到了 ...
android获取屏幕宽高与获取控件宽高
1.获取屏幕宽高方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px ...
android获取该控件在屏幕,android获取屏幕宽高与获取控件宽高(三种方法)
1.获取屏幕宽高方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px ...
uniapp微信小程序获取屏幕宽高
uniapp开发微信小程序的时候,有时候去调整样式你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx 有的朋友觉得可以使用vw vh % 是的,当然可以但是要让你的元素,宽高,比如 ...
Android获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏高度的方法汇总
看这个博客你可以知道获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏(虚拟按键栏)高度的方法目录顺序为代码测试的机型状态栏高度 actionbar高度屏幕高度导航 ...

react-native系列(24)API篇：屏幕宽高和屏幕像素密度

Dimensions屏幕宽高

PixelRatio屏幕像素密度

react-native系列(24)API篇：屏幕宽高和屏幕像素密度相关推荐

最新文章

热门文章