卸载react-native-simple-radio-button后React Native应用图片不显示

核心原因 #

你遇到的图片无法显示问题，本质是卸载react-native-simple-radio-button时，结合全局npm更新，意外修改了项目的依赖树，尤其是React Native核心依赖（比如react-native本身）的版本或内部文件被改动，导致Metro打包器无法正确处理图片资源的加载路径和打包逻辑。

具体来说：

• 全局npm更新后，其依赖解析规则可能和旧版本不同，卸载包时会重新计算依赖树，导致原本锁定版本的依赖（比如你的react-native@0.61.5）被悄悄升级或部分子依赖被替换。
• React Native的图片加载完全依赖Metro打包器对资源的处理，核心依赖版本的变动会直接破坏资源映射关系，最终表现为<Image>和<ImageBackground>组件只显示空白区域。
• 卸载过程中出现的peer依赖警告，也说明部分依赖的版本兼容性出现了问题，进一步影响了打包流程。

分步解决方案 #

按照以下步骤操作，应该能恢复图片显示：

1. 重置项目依赖，恢复到package.json锁定的版本
   首先彻底清理现有依赖和锁定文件，避免残留的修改影响：

   # 删除node_modules和锁定文件
   rm -rf node_modules package-lock.json
   # 重新安装依赖
   npm install
   

2. 清除Metro打包器缓存
   Metro可能缓存了旧的资源映射，需要强制重置：

   npx react-native start --reset-cache
   

   保持这个终端窗口运行，再打开另一个终端执行后续命令。

3. 重新构建iOS项目的Pods依赖
   iOS的CocoaPods可能也受到了依赖变动的影响，需要重新安装：

   # 进入iOS目录
   cd ios
   # 清除现有Pods
   pod deintegrate && pod clean
   # 重新安装Pods
   pod install
   # 返回根目录
   cd ..
   

4. 重新运行iOS项目

   react-native run-ios
   

额外注意事项 #

• 后续卸载包时，建议使用npm uninstall --no-save react-native-simple-radio-button，加上--no-save参数可以避免修改package.json和触发依赖树的重新计算，减少意外变动的风险。
• 如果之后还遇到类似问题，可以检查package-lock.json文件的变动，确认是否有依赖被意外升级，必要时手动锁定关键依赖的版本。

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