Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

Ring

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

expo-image

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@amazon-devices/expo-image为React Native和Expo提供跨平台、高性能的图像组件。该库支持BlurHash和ThumbHash，它们是图像占位符的紧凑表示形式。它还支持在来源更改时在图像之间进行转换。@amazon-devices/expo-image实现CSS object-fit和object-position属性（仅提供英文版）。

安装
示例
API参考
已知问题和限制
支持的版本
相关主题

安装

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

已复制到剪贴板。

 dependencies: {
     ...
     "@amazon-devices/expo-image": "~2.0.1",
 }

使用npm install命令重新安装依赖项。

示例

此示例演示了一个带有thumbhash占位符和多个来源的图像。

已复制到剪贴板。

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Image} from '@amazon-devices/expo-image';

export const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={[
          'https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg',
          'https://climateforlife.pl/wp-content/uploads/2023/10/panda.png',
        ]}
        style={styles.image}
        placeholder="thumbhash:/1QcSHQRnh493V4dIh4eXh1h4kJUI"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  image: {
    width: 300,
    aspectRatio: 1,
  },
});

API参考

请查看文档页面，了解有关此库和API参考的信息：针对expo-image的官方Expo文档（仅提供英文版）。

组件

组件	描述
`Image`	加载和呈现图像的跨平台React组件

Image属性

属性	描述	支持
`accessibilityLabel`	当用户与图像交互时，屏幕阅读器读取的文本。在网页上设置用于网络爬虫和链接遍历的alt标签。	✅ 是
`accessible`	如果为`true`，则表示视图是无障碍功能元素。如果视图是无障碍功能元素，它会将其子项聚集成一个可选组件。	✅ 是
`allowDownscaling`	是否应缩小图像以匹配视图容器的大小。默认设置为`true`。设置为`false`可能会对应用性能产生负面影响，尤其是在处理大型资产时。但是，设置为`false`将使图像大小调整更加流畅，并且最终用户将始终可以获得尽可能高的资产质量。	✅ 是
`alt`	当用户与图像交互时，屏幕阅读器读取的文本。在网页上设置用于网络爬虫和链接遍历的`alt`标签。是`accessibilityLabel`的别名。	✅ 是
`blurRadius`	以点为单位的模糊半径，若为`0`，表示没有模糊效果。此效果不适用于占位符。	✅ 是
`contentFit`	确定应如何调整图像大小以适配其容器。图像可以通过多种方式填充容器，例如“保持宽高比”或“拉伸至最大可用空间”。类似于CSS的`object-fit`属性。	✅ 是
`contentPosition`	可以与`contentFit`一起使用，用于指定应如何使用x/y坐标将图像放置在其自身的容器内。CSS `object-position`属性的等效属性。	✅ 是
`defaultSource`	警告：已弃用。图像来源的默认值。为React Native图像中的`defaultSource`提供兼容性。可改用`placeholder`属性。	✅ 是
`fadeDuration`	警告：已弃用。为React Native图像中的`fadeDuration`提供兼容性。可改为使用`transition`规定时长。	✅ 是
`focusable`	确定此View是否应针对非触摸输入设备可设定焦点，并使用硬件键盘获得焦点。	✅ 是
`loadingIndicatorSource`	警告：已弃用。为React Native图像中的`loadingIndicatorSource`提供兼容性。可改用`placeholder`属性。	✅ 是
`onError`	在图像提取错误时调用。	✅ 是
`onLoad`	在图像加载成功完成时调用。	✅ 是
`onLoadEnd`	在图像加载成功或失败时调用。	✅ 是
`onLoadStart`	当图像开始加载时调用。	✅ 是
`placeholder`	在加载正确图像但尚未显示任何图像或未设置来源时要显示的图像。	✅ 是
`priority`	完成加载的优先级。如果一次有多个负载排队，则优先级较高的负载将首先启动。对于优先级，会尽最大努力去处理，但无法保证负载的开始或完成顺序。	✅ 是
`recyclingKey`	在加载和渲染最终图像之前，将图像视图内容重置为空白或占位符。对于再循环视图（例如`FlashList`）特别有用，可以防止在新视图完全加载之前显示先前的来源代码。	✅ 是
`resizeMode`	警告：已弃用。为React Native图像中的`resizeMode`提供兼容性。不支持`“重复”`选项。可改用更强大的`contentFit`和`contentPosition`属性。	✅ 是
`source`	图像来源，可以是远程URL、本地文件资源或由`require()` 函数产生的数字。当以来源数组的形式提供时，将选择最适合容器大小且最接近屏幕比例的来源。在这种情况下，必须提供`width`、`height`和`scale`属性。	✅ 是
`tintColor`	一种用于着色模板图像的颜色，例如只有不透明度重要的位图图像。颜色应用于每个非透明像素，从而使图像的形状采用该颜色。此效果不适用于占位符。	✅ 是
`transition`	描述切换图像来源时图像视图应如何转换内容。如果以数字形式提供，则可以获得`'cross-dissolve'`效果的持续时间（以毫秒为单位）。	✅ 是
`onProgress`	用于视频播放或文件上传。React Native文档：https://reactnative.dev/docs/image#onprogress（仅提供英文版）	❌ 否

方法

方法	描述
`clearDiskCache`	异步清除磁盘缓存中的所有图像。
`clearMemoryCache`	异步清除存储在内存中的所有图像。
`prefetch`	在给定的URL上预加载图像，以后可以在图像视图中使用这些图像。预加载的图像始终缓存在磁盘上，因此请务必使用`disk`（默认）或`memory-disk`缓存策略。

已知问题和限制

此库不支持SVG和动画源。
有时无法在Vega上调用onLoadEnd、onLoadStart、onLoad。

支持的版本

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

支持的第三方库和服务

Last updated: 2025年9月30日

expo-image

安装

示例

API参考

组件

Image属性

方法

已知问题和限制

支持的版本

相关主题