HOW - 图片的一倍图、二倍图和三倍图

譬如 React Naitve 框架，可以让系统会自动根据当前设备的 PixelRatio 选择最合适的资源。另外在 HOW - next/image Web 图片优化参考指南 中我们同样发现 next/image 具备如下特性：

响应式图片：支持响应式图片，根据不同的设备和屏幕尺寸加载适当大小的图像。

基本原理

根据设备的屏幕像素密度（例如 1x、2x、3x）自动选择合适的图片资源，只要你按照以下命名规范提供图片：

屏幕密度	图片文件名
1x	image.png
2x	[email protected]
3x	[email protected]

实际操作步骤

假设你有一个图像资源叫做 logo.png：

1. 需要准备图像资源

你需要准备 3 个不同尺寸的图片文件（比如 logo 的 1x 是 100x100）：

• logo.png（100x100）→ 对应 1x
• [email protected]（200x200）→ 对应 2x 屏幕
• [email protected]（300x300）→ 对应 3x 屏幕

这三个文件应放在同一个目录下。

2. 使用方式

以 React Native 为例，你在代码中只需要写：

<Image source={require('./assets/logo.png')} />

React Native 会根据设备的分辨率自动选择 [email protected] 或 [email protected]，无需你手动判断。

注意事项

• 不要直接 require('@2x.png')，只写最基本的文件名。
• 所有的图片尺寸必须成比例，不然可能会出现显示问题。
• 这个机制是静态资源特有的，对远程图片（例如 URI）无效。