React Native iOS真机无网络状态下图片不显示问题求助

看起来你遇到了React Native开发里很常见的iOS真机资源加载问题——模拟器正常但真机不显示图片，我来帮你一步步排查修复：

1. 优先检查文件名大小写 #

iOS真机的文件系统是大小写敏感的，但macOS模拟器默认不敏感。你代码里写的是require('../assets/NoConnection.png')，一定要确认src/assets文件夹里的图片文件名完全一致：

• 有没有写成noconnection.png、Noconnection.png这类大小写不符的名称？
• 后缀名是不是严格的.png，有没有写成.PNG？

如果大小写不匹配，修改成和代码里完全一致的名称后，重新打包真机试试。

2. 确认资源已被正确打包进iOS项目 #

有时候React Native自动打包资源时会漏掉文件，你可以手动检查Xcode项目：

• 打开iOS目录下的.xcworkspace文件
• 在左侧导航栏找到你的项目，右键点击Resources文件夹，选择Add Files to "YourProjectName"
• 选中src/assets/NoConnection.png，确保勾选Copy items if needed和对应的target，然后点击Add
• 重新编译运行到真机

3. 清理React Native和Xcode缓存 #

缓存问题经常导致真机不加载最新资源，按顺序执行以下步骤：

• 关闭metro服务器，运行命令清理metro缓存：

  npx react-native start --reset-cache
  

• 关闭Xcode，删除Xcode的Derived Data：
  打开Xcode → 顶部菜单栏Xcode → Preferences → Locations → 点击Derived Data旁的箭头，删除对应项目的文件夹
• 删除iOS项目的build文件夹：在iOS目录下运行rm -rf build
• 重新运行npx react-native run-ios安装到真机

4. 验证图片路径是否绝对正确 #

虽然模拟器正常，但还是确认下相对路径：假设NoInternetScreen.js在src/screens目录下，../assets/NoConnection.png确实指向src/assets，路径是对的。但如果你的文件结构有变化，比如NoInternetScreen.js在其他子目录，可能需要调整路径层级，比如改成绝对路径（从项目根目录开始）：

source={require('../../src/assets/NoConnection.png')}

按照上面的步骤逐一排查，应该就能解决真机不显示图片的问题了！

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