React Native图片加载：require与import语法适配效果是否一致？

答案是肯定的，import语法和require一样，完全支持React Native基于屏幕密度自动选择@2x/@3x后缀图片的机制。

不管是用require静态引入，还是import导入图片，Metro打包器都会在构建阶段扫描同名带密度后缀的图片文件（比如my-icon.png、my-icon@2x.png、my-icon@3x.png），并根据目标设备的屏幕密度自动匹配对应资源。

两种写法的效果完全一致：

// require写法，支持自动适配
<Image source={require('./my-icon.png')} />

// import写法，同样支持自动适配
import icon from './my-icon.png';
<Image source={icon} />

需要注意的是：

• 不同密度的图片必须同名，仅通过@2x/@3x后缀区分，且放在同一目录下
• import属于静态导入，和require一样，Metro能在编译阶段完成资源匹配，不会影响运行时性能

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