在RN设计和开发布局的过程中,会遇到需要设置等于设备宽高的一些属性。我们可以把这些属性单独抽离出来写成一个小工具,用的时候直接引入即可。
新建Util.js文件,放入到项目的工具文件夹下。
首先引入React-Native的像素密度工具和获取设备宽高的API
import React from 'react'
/*像素密度*/
import { PixelRatio } from 'react-native';
/*获取设备宽高*/
import Dimensions from 'Dimensions'
官方文档对PixelRatio的Get方法的介绍:
static get()
返回设备的像素密度,例如:
PixelRatio.get() === 1mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2iPhone 4, 4S
iPhone 5, 5c, 5s
iPhone 6
xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3iPhone 6 plus
xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5Nexus 6
官方文档对Dimensions的Get方法的介绍
static get(dim: string)
初始的尺寸信息应该在runApplication
之后被执行,所以它可以在任何其他的require被执行之前就可用。不过在稍后可能还会更新。
注意:尽管尺寸信息立即就可用,但它可能会在将来被修改(譬如设备的方向改变),所以基于这些常量的渲染逻辑和样式应当每次render之后都调用此函数,而不是将对应的值保存下来。(举例来说,你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸)。
例子:var {height, width} = Dimensions.get('window');
所以我们在Util.js中定义一个对象
const Util = {
radio: PixelRatio.get(),
pixel: 1 / PixelRatio.get(),
size: {
width : Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
clg() {
console.log(Dimensions.get('window').width, Dimensions.get('window').height)
}
}
并且导出
export default Util
最终代码如下:
import React from 'react'
import { PixelRatio } from 'react-native';
import Dimensions from 'Dimensions'
const Util = {
radio: PixelRatio.get(),
pixel: 1 / PixelRatio.get(),
size: {
width : Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
clg() {
console.log(Dimensions.get('window').width, Dimensions.get('window').height)
}
}
export default Util
使用方法
- 在需要该工具的组件内引入Util.js
/*你Util.js存放的路径*/
import Util from '../utils/Util'
- 在需要时直接使用
const styles = StyleSheet.create({
container: {
height: Util.size.height,
width: Util.size.width,
},
})