你如何在 React Native 中处理图像和资源？

本地图像使用 require（在构建时捆绑）；远程图像使用 uri。图像需要明确的尺寸（width/height）——与网页不同，它们不会根据文件自动调整大小。

分辨率和 resizeMode

性能：优化图像

为什么这很重要

理解如何处理图像和资源是有价值的，因为 大多数应用都显示图像，高效地处理图像会影响用户体验和应用性能，所以这是很有用的实用知识。

理解 加载图像 ——通过 require（在构建时捆绑）加载本地图像、通过 uri 加载远程图像，以及重要的一点是 React Native 中的图像需要明确的尺寸（与网页不同，它们不会自动调整大小）——这对于显示任何图像都是必需的。

理解 分辨率处理（提供 @2x/@3x 变体，以便 React Native 根据设备像素密度选择正确的变体，使图像在所有屏幕上都清晰）和 resizeMode（图像如何适应其容器）对于在 Android 和 iOS 的多种屏幕像素密度上看起来不错的图像很重要。

最重要的是，理解 图像性能优化 是有价值的，因为 图像是内存问题和卡顿的常见来源（尤其是在列表中）：使用适当尺寸的图像（不要将大图像加载到小视图中，这会浪费内存和带宽）、使用 FastImage 以获得更好的远程图像性能和 缓存（这样图像不会重新下载，列表可以流畅滚动——相比默认 Image 在图像密集型列表中有显著改进）、使用高效的格式（WebP）、以及使用占位符进行延迟加载。

这些优化很重要，因为图像密集型应用（常见——信息流、图库、个人资料）如果图像处理不当，可能会遇到真实的性能问题。

由于大多数应用都显示图像，且正确处理它们（正确的加载和尺寸、分辨率变体，尤其是使用缓存和适当调整大小进行性能优化）会影响用户体验（清晰、快速加载的图像）和应用性能（避免内存问题和卡顿），理解 React Native 中的图像和资源是有价值的、实践相关的知识——对于显示图像这一常见需求很重要，其中理解加载、分辨率，尤其是性能优化（缓存、调整大小）是构建流畅、精致的图像密集型应用的关键。