react native 关于图片适配问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NotesChapter/article/details/79867700

一般我们在开发项目的时候，给我们的切图大致就是那么几个尺寸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：图片不拉伸不缩放且居中