React-Native开发获取设备宽高小工具

在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

使用方法

1. 在需要该工具的组件内引入Util.js

/*你Util.js存放的路径*/
import Util from '../utils/Util'

2. 在需要时直接使用

const styles = StyleSheet.create({
    container: {
        height: Util.size.height,
        width: Util.size.width,
    },
})