React Native中获取屏幕的宽高、分辨率

开发App，避免不了要适配各个屏幕，为了精准的适配各个屏幕对应尺寸的设计，所以需要获取屏幕的宽高。

有过iOS经验的小伙伴都知道在images.xcassets中会分为@2x和@3x图片，如下图所示：

系统会根据手机类型，来选定图片的尺寸。但是在RN中，选定对应的图片设定在组件中后，如果不对组件设定宽高， 那么就会存在问题，RN中会根据图片的尺寸来生成对应大小的组件，故此处是一坑，需要处理。

在RN中获取屏幕的尺寸和分辨率需要用到Dimensions组件。

import {Platform, StyleSheet, Text, View, Dimensions} from 'react-native';复制代码

具体代码如下：

export default class FirstTest extends Component{
    render(){
        return (
            <View style={styles.container}>
                <Text style={styles.textShow}>屏幕的宽度为:{Dimensions.get('window').width}</Text>
                <Text style={styles.textShow}>屏幕的高度为:{Dimensions.get('window').height}</Text>
                <Text style={styles.textShow}>当前屏幕的分辨率：{Dimensions.get('window').scale}</Text>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'purple',
    },

    textShow: {
        marginLeft:15,
        marginRight:15,
        marginTop:40,
        textAlign:'center',
        color:'#187ae6',
        fontSize:20,
        fontWeight:'bold',
    }
});
复制代码

运行效果如下：