WebStorm自动导入Image优先选择react-native-web而非react-native问题咨询

• 适配场景不同：react-native/Image 是RN官方针对原生端（iOS/Android）推出的标准图片组件，直接对接原生渲染能力，支持本地资源加载、原生缓存控制、渐进式加载、自定义裁剪等原生专属特性；react-native-web/Image 是RN体系下Web端的适配实现，本质是封装了HTML的<img>标签，能力完全对齐Web端DOM的图片渲染逻辑，仅用于RN转Web的场景。
• 特性支持差异：react-native/Image 提供的resizeMethod、capInsets、onPartialLoad等原生专属属性，在react-native-web/Image中不会生效；反之react-native-web/Image 额外支持crossOrigin、referrerPolicy等Web端专属属性，原生RN的Image组件不识别这类参数。
• 打包影响不同：如果开发纯原生RN应用（仅输出iOS/Android安装包），错误引入react-native-web/Image会额外加载Web端适配代码，增大包体积，还可能出现样式异常、属性不生效的问题。

操作必要性 #

若你当前开发的是仅面向iOS/Android端的纯原生RN应用，无需适配Web端，该操作非常有必要，可避免后续误引入错误来源的Image组件导致的未知Bug；若你开发的是多端兼容项目（需同时打包Web、原生端），则不建议修改默认导入规则，开发时按需手动选择引入来源即可。

修改步骤 #

• 打开WebStorm设置面板：Windows/Linux 按下快捷键 Ctrl + Alt + S，Mac 按下快捷键 Command + ,
• 依次进入菜单：编辑器 -> 自动导入，找到「排除的导入路径」配置项
• 点击添加按钮，填入 react-native-web 后保存设置
• 重启WebStorm生效，后续自动导入Image组件时，将仅提示react-native下的组件来源

你遇到的自动导入多来源提示截图对应如下：

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