react-native-fast-image版本3.0.0
@amazon-devices/react-native-fast-image版本3.0.0在Vega上提供对于react-native-fast-image的支持，后者提供高性能React Native图像组件。
React Native的Image组件像浏览器一样处理图像缓存。如果服务器为图像返回正确的缓存控制标头，您会在浏览器中看到内置的缓存行为。
您可能会注意到：
- 闪烁
- 缓存未命中
- 从缓存进行加载时性能低下
- 总体性能低下
FastImage是Image的替代物，它解决了除网页之外的其他平台上的这些问题。
此库由应用部署，可供适用于Vega的React Native应用使用，无需单独的安装过程。此库自动链接，您的应用在运行时会链接到该库。该库保证仅与为之构建的适用于Vega的React Native版本兼容。
升级应用的适用于Vega的React Native版本时，可以考虑升级其库依赖关系的最佳实践。
有关此库和API参考的更多信息，请查看文档。 README.md（仅提供英文版）。
安装
- 在
package.json文件中添加JavaScript库依赖项。"dependencies": { ... "@amazon-devices/react-native-fast-image": "~3.0.0" } - 使用
npm install命令重新安装依赖项。
示例
import FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)
API参考
组件
| 属性 | 描述 | 默认值 | 支持 |
|---|---|---|---|
source |
要加载的远程图像的来源。 | （无） | ✅ 是 |
source.uri |
加载图像的远程URL，例如https://facebook.github.io/react/img/logo_og.png。 | （无） | ✅ 是 |
source.priority |
FastImage.priority.low - 低优先级 FastImage.priority.normal - 普通优先级 FastImage.priority.high - 高优先级 |
FastImage.priority.normal |
✅ 是 |
resizeMode |
FastImage.resizeMode.contain - 均匀缩放图像（保持宽高比），使图像的宽度和高度等于或小于视图的相应尺寸（减去内边距）。确保整个图像可见，但可能会留下空白区域。FastImage.resizeMode.cover - 均匀缩放图像（保持宽高比），使图像的宽度和高度等于或大于视图的相应尺寸（减去内边距）。确保容器已完全填满，这可能会裁剪部分图像。FastImage.resizeMode.stretch - 单独缩放宽度和高度，这可能会改变源的宽高比。FastImage.resizeMode.center - 不缩放图像，保持居中。 |
FastImage.resizeMode.cover |
✅ 是 |
onFastImageLoadStart |
当图像开始加载时调用。 | （无） | ✅ 是 |
onFastImageLoad |
成功提取图像时调用。使用加载的图像的宽度和高度调用。 | （无） | ✅ 是 |
onFastImageError |
在图像提取错误时调用。 | （无） | ✅ 是 |
onFastImageLoadEnd |
在图像完成加载时调用，无论加载成功还是出错。 | （无） | ✅ 是 |
| source.headers | 允许为经过身份验证的请求传递键值对的对象。 | ❌ 否 | |
source.cache |
设置缓存策略。 | ❌ 否 | |
tintColor |
为图标和图像着色。 | ❌ 否 | |
defaultSource |
加载主图像源时显示占位符图像。 | ❌ 否 | |
onFastImageProgress |
跟踪图像加载的进度。依赖项Image.onProgress有问题。 |
❌ 否 |
方法
| 方法 | 描述 |
|---|---|
preLoad |
预加载图像以便稍后显示。 |
clearMemoryCache |
从内存缓存中清除所有图像。 |
clearDiskCache |
从磁盘缓存中清除所有图像。 |
已知问题和限制
向后兼容问题
-
自
v0.12起的操作系统版本与amzn/react-native-fast-image（npm程序包）2.0.1726598878及更低版本不兼容。 -
在
v0.12+操作系统（npm程序包的旧版本）上运行应用时，该应用会在启动时崩溃：Volta:Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'FastImageTurboModule' could not be found.验证此名称的模块是否已在原生二进制文件中注册。要避免出现这种崩溃，您必须按照最新版本的
@amazon-devices/react-native-fast-image重新构建应用：-
检查您应用的
package.json不会对旧版本的fast-image进行硬编码。使用SemVar版本
^3.0.0，以便应用获得最新的补丁。 -
删除
package-lock.json可移除任何锁定的fast-image版本。如果您依赖此文件来锁定其他依赖项，则可以手动删除
package-lock.json中@amazon-devices/react-native-fast-image的条目。 - 删除
node_modules文件夹，这样npm就不会获取旧的缓存版本。 - 重建应用。
-
支持的版本
| 程序包版本 | 基于 | @amazon-devices/react-native-kepler版本 |
|---|---|---|
| 3.0.x | 8.6.3 | 2.0.x |
相关主题
Last updated: 2025年10月3日
