as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持

react-native-fast-image版本3.0.0

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组件在很大程度上像浏览器一样处理图像缓存。如果服务器为图像返回正确的缓存控制标头,您通常会获得浏览器中的那种内置缓存行为。但是也有许多人注意到了以下问题:

  • 闪烁
  • 缓存未命中
  • 从缓存进行加载时性能低下
  • 总体性能低下

FastImageImage的替代物,它解决了除Web之外的其他平台上的这些问题。

这是一个应用部署的库,可供适用于Vega的React Native使用,无需单独的安装过程。它作为自动链接库进行部署,您的应用在运行时会链接到该库。只能在库和为其构建的适用于Vega的React Native版本之间保证兼容性。

当您升级用于构建应用的适用于Vega的React Native版本时,最佳实践是同时升级它所依赖的库的版本。

请在此处查看原始库文档,了解有关此库、API参考等的更多信息: README.md(仅提供英文版)。

安装

  1. package.json文件中添加JavaScript库依赖项。

    已复制到剪贴板。

    "dependencies": {
       ...
       "@amazon-devices/react-native-fast-image": "~3.0.0"
    }
    
  2. 使用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参考

组件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 在图像完成加载时调用,无论加载成功还是出错。 (无)

方法

方法 描述
preLoad 预加载图像以便稍后显示。
clearMemoryCache 从内存缓存中清除所有图像。
clearDiskCache 从磁盘缓存中清除所有图像。

Vega上的例外情况

在API支持方面,适用于Vega的React Native库有一些例外。此部分将介绍这些例外情况。

  • Vega平台不支持source.headers
  • Vega平台不支持source.cache
  • Vega平台不支持tintColor
  • Vega平台不支持defaultSource
  • 由于此回调依赖的Image.onProgress存在已知问题,因此Vega平台不支持onFastImageProgress

向后兼容问题

v0.12起的操作系统版本与amzn/react-native-fast-image(npm程序包)2.0.1726598878及更低版本不兼容。

v0.12及更高版本的操作系统上,运行按照旧版本npm程序包构建的应用时,会在启动时出现以下崩溃情况:

Volta:Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'FastImageTurboModule' could not be found.Verify that a module by this name is registered in the native binary.

要解决这个问题,您必须按照最新版本的@amazon-devices/react-native-fast-image重新构建应用:

  1. 确保您应用的package.json不会对任何旧版本的fast-image进行硬编码
    1. 建议 - 使用semvar版本^3.0.0,以便应用可以获取最新的补丁
  2. 删除package-lock.json可移除任何锁定的fast-image版本
    1. 如果您依赖此文件来锁定其他依赖项,则可以手动删除package-lock.json@amazon-devices/react-native-fast-image的条目。
  3. 删除node_modules文件夹,这样npm就不会获取旧的缓存版本。
  4. 重新构建

支持的版本

程序包版本 基于 @amazon-devices/react-native-kepler版本
3.0.x 8.6.3 2.0.x

其他资源

有关其他库的信息,请参阅支持的第三方库和服务


Last updated: 2025年10月3日