升级至Expo SDK 51后<ImageBackground>无法加载本地静态图片

近期将Expo项目从SDK 50升级至SDK 51后，ImageBackground组件无法加载本地静态图片。此前SDK 50中正常运行的本地图片加载逻辑，升级后仅支持通过uri属性加载网络图片。

可正常运行的代码（网络图片） #

import { ImageBackground } from "react-native";

<ImageBackground
  source={{ uri: "https://some-url/background.png" }}
  resizeMode="cover"
  style={styles.background}
>
  {/* 子组件内容 */}
</ImageBackground>

无法运行的代码（本地图片） #

import { ImageBackground } from "react-native";

<ImageBackground
  source={require("../../assets/image.png")}
  resizeMode="cover"
  style={styles.background}
>
  {/* 子组件内容 */}
</ImageBackground>

当前项目依赖 #

"dependencies": {
  "@react-native-async-storage/async-storage": "1.21.0",
  "@react-navigation/bottom-tabs": "^6.5.19",
  "@react-navigation/drawer": "^6.6.14",
  "@react-navigation/native": "^6.1.16",
  "@react-navigation/native-stack": "^6.9.25",
  "@reduxjs/toolkit": "^2.2.1",
  "axios": "^1.6.7",
  "expo": "^51.0.8",
  "expo-location": "~16.5.5",
  "expo-status-bar": "~1.11.1",
  "expo-updates": "~0.24.12",
  "react": "18.2.0",
  "react-native": "0.73.5",
  "react-native-element-dropdown": "^2.10.2",
  "react-native-gesture-handler": "~2.14.0",
  "react-native-gifted-chat": "^2.4.0",
  "react-native-keyboard-aware-scroll-view": "^0.9.5",
  "react-native-maps": "1.10.0",
  "react-native-paper": "^5.12.3",
  "react-native-reanimated": "~3.6.2",
  "react-native-root-toast": "^3.5.1",
  "react-native-safe-area-context": "4.8.2",
  "react-native-screens": "~3.29.0",
  "react-native-svg": "14.1.0",
  "react-native-tab-view": "^3.5.2",
  "react-native-vector-icons": "^10.0.3",
  "react-native-webview": "13.6.4",
  "react-native-youtube-iframe": "^2.3.0",
  "react-redux": "^9.1.0",
  "redux-persist": "^6.0.0",
  "uuid": "^9.0.1"
}

解决方法 #

• 校验本地资源路径：确认require()中的相对路径与组件所在位置匹配，避免因项目结构调整导致路径层级错误。
• 清除Expo缓存：执行命令 npx expo start --clear，清除SDK升级后遗留的缓存资源，解决资源打包冲突。
• 确认资源配置：检查app.json或app.config.js中的assets字段，确保包含本地图片所在目录，示例：

  "assets": ["./assets/"]
  

• 临时替代方案：若ImageBackground问题未解决，可使用Image组件嵌套实现背景效果：

  import { Image, View } from "react-native";
  
  <View style={styles.backgroundContainer}>
    <Image
      source={require("../../assets/image.png")}
      resizeMode="cover"
      style={styles.backgroundImage}
    />
    {/* 原ImageBackground内的子组件 */}
  </View>
  

• 排查依赖冲突：确认项目中第三方库与React Native 0.73.5（SDK 51对应版本）兼容，尤其是涉及图片加载的库。

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