react native 关于图片适配问题_react native 美术资源适配-优快云博客

本文链接：https://blog.youkuaiyun.com/NotesChapter/article/details/79867700

在React Native开发中，面对不同分辨率的设备，如何确保图片正确适配是一大挑战。本文介绍了如何利用Dimensions获取设备信息，通过设置Image组件的resizeMode属性，如'cover'、'contain'、'stretch'等，实现图片在不同屏幕尺寸下完美显示，避免拉伸或留白的问题。详细解析了各种resizeMode的使用场景和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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