React Native ImageBackground：实现contain模式下全屏背景图

你遇到的问题本质是：resizeMode="contain"会让图片按比例完整显示在容器内，当容器和图片宽高比不一致时，就会出现留白；而cover会强制铺满但裁切超出部分。要实现完整显示图片+铺满全屏，可以通过动态计算缩放比例来实现，具体方案如下：

方案1：已知图片宽高时直接计算 #

如果已经知道图片的宽高数值，直接计算容器与图片的比例，取最大值作为缩放倍数：

import { useWindowDimensions } from 'react-native';

function YourComponent() {
  const { width, height } = useWindowDimensions();
  // 替换成你的图片实际宽高
  const imgWidth = 1920;
  const imgHeight = 1080;
  // 计算缩放比例，确保图片铺满容器且完整显示
  const scale = Math.max(width / imgWidth, height / imgHeight);

  return (
    <ImageBackground
      resizeMode="contain"
      source={{ uri: "https://www.anime-internet.com/content/images/2022/06/2022-06-07-23_09_28-AnimePahe_Tomodachi_Game_-_10_1080p_SubsPlease.mp4-VLC-media-player-1.jpg" }}
      style={{
        width: "100%",
        height: "100%",
        transform: [{ scale }]
      }}
    >
      {/* 在这里添加你的子组件 */}
    </ImageBackground>
  );
}

方案2：动态获取图片宽高 #

如果不知道图片的宽高，可以用Image.getSize方法异步获取后计算：

import { useState, useEffect } from 'react';
import { Image, ImageBackground, useWindowDimensions } from 'react-native';

function YourComponent() {
  const { width, height } = useWindowDimensions();
  const [scale, setScale] = useState(1);
  const imgUrl = "https://www.anime-internet.com/content/images/2022/06/2022-06-07-23_09_28-AnimePahe_Tomodachi_Game_-_10_1080p_SubsPlease.mp4-VLC-media-player-1.jpg";

  useEffect(() => {
    Image.getSize(imgUrl, (imgWidth, imgHeight) => {
      const calculatedScale = Math.max(width / imgWidth, height / imgHeight);
      setScale(calculatedScale);
    }, (error) => {
      console.error('获取图片尺寸失败:', error);
    });
  }, [width, height, imgUrl]);

  return (
    <ImageBackground
      resizeMode="contain"
      source={{ uri: imgUrl }}
      style={{
        width: "100%",
        height: "100%",
        transform: [{ scale }]
      }}
    >
      {/* 在这里添加你的子组件 */}
    </ImageBackground>
  );
}

原理说明 #

通过Math.max(width / imgWidth, height / imgHeight)取容器与图片宽、高比例的最大值，确保图片按contain模式缩放后，再整体放大到刚好铺满容器，既保留了图片的完整显示，又填满了整个屏幕空间，不会出现裁切或留白问题。

内容的提问来源于stack exchange，提问作者Harsh Kumar