react native 关于图片适配问题

一般我们在开发项目的时候，给我们的切图大致就是那么几个尺寸320 x 480, 480 x 800, 720 x1280, 1080 x 1920 等等。 当我们的切图只有那么一套的时候，遇到不同分辨率的手机还要使我们的图片占满整个屏幕， 这就可能出现留白或者被拉伸这种情况，很尴尬。 不说了直接上代码了

获取Dimensions设备信息，主要是为了获取屏幕宽高等设备信息。

import {Platform, StyleSheet, Text, View, Image, Dimensions,} from 'react-native';

获取屏幕的宽高

var Demensions = require('Dimensions'); //初始化宽高 var {width, height} = Demensions.get('window');

设置屏幕宽高样式

backgroundImage: { flex:1, //水平居中 alignItems:'center', //垂直居中 justifyContent:'center', //宽高适应总宽高 width:width, height:height, //不加这句，就是按照屏幕高度自适应 //加上这几，就是按照屏幕自适应（拉伸整个屏幕） resizeMode:Image.resizeMode.stretch, //祛除内部元素的白色背景 backgroundColor:'rgba(0,0,0,0)', },

这里默认了resizeMode =’cover’： 图片按照宽高比例中较短的一方显示，长的一方将被截取两头 Image的resizeMode属性 ：

resizeMode enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)

如果我们需要将原图完全显示出来可以设置

resizeMode =’contain’ ： 图片将按比例缩放按宽和高较长的显示，短的方向两边留出空白

resizeMode =’stretch’ ： 图片将完全显示出来并拉伸变形铺满整个屏幕

repeat：图片将重复并铺满屏幕（只支持ios）

center：图片不拉伸不缩放且居中