expo-asset

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

@amazon-devices/expo-asset提供Expo通用模块，用于下载资产并将其传递给其他API。

安装
示例
API参考
- 挂钩
- 类
  - 资产属性
  - 资产方法
支持的版本
其他资源

安装

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

已复制到剪贴板。

 dependencies: {
      ...
     "@amazon-devices/expo-asset": "~2.0.0",
     "expo": "~50.0.0",
     ...
}

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

示例

以下示例演示了如何使用useAssets挂钩在本地下载和存储资产。

已复制到剪贴板。

import React from 'react';
import {useAssets} from '@amazon-devices/expo-asset';
import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';

export const App = () => {
  // eslint-disable-next-line no-unused-vars
  const [assets, _] = useAssets([
    require('./assets/learn.png'),
    require('./assets/kepler.png'),
  ]);

  if (!assets) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          未选择资产，请检查“useAssets”方法中提供的路径
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Image
        source={assets[0] as ImageSourcePropType}
        width={400}
        height={400}
      />
      <Image
        source={assets[1] as ImageSourcePropType}
        width={400}
        height={400}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'row',
    gap: 100,
  },
  text: {
    fontSize: 30,
    backgroundColor: 'black',
  },
});

下面的示例演示了如何使用loadAsync方法下载资产。

已复制到剪贴板。

import React, {useState} from 'react';
import {Asset} from '@amazon-devices/expo-asset';
import {
  Button,
  Image,
  ImageSourcePropType,
  StyleSheet,
  Text,
  View,
} from 'react-native';

export const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [image, setImage] = useState<Asset>();

  const onLoadAsset = async () => {
    setIsLoading(true);
    const [asset] = await Asset.loadAsync(require('./assets/kepler.png'));
    setImage(asset);
    setIsLoading(false);
  };

  return (
    <View style={styles.container}>
      <Button title="Load asset" onPress={onLoadAsset} />
      {isLoading && <Text style={styles.text}>加载中...</Text>}
      {image && <Image source={image as ImageSourcePropType} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    color: 'black',
  },
});

API参考

请您查看以下专门文档页面，了解有关此库、API参考等的信息：针对expo-asset的官方Expo文档（仅提供英文版）。

挂钩

挂钩	描述
`useAssets`	在本地下载和存储一项或多项资产

类

类	描述
`Asset`	`Asset`类代表应用中的资产

资产属性

属性	描述
`downloaded`	布尔值，告知资产是否已下载。
`downloading`	布尔值，告知是否正在下载资产。
`hash`	资产数据的MD5哈希值。
`height`	如果资产是图像，则将图像数据的高度除以比例系数。比例系数是文件名中@之后的数字，如果不存在，则该系数为1。
`localUri`	如果已下载资产（通过调用downloadAsync()），则`file://` URI指向设备上包含资产数据的本地文件。
`name`	不带扩展名的资产文件的名称。文件名中也没有从@开始的部分（用于指定图像的比例系数）。
`type`	资产文件名的扩展名。
`uri`	指向远程服务器上资产数据的URI。
`width`	如果资产是图像，则将图像数据的宽度除以比例系数。比例系数是文件名中@之后的数字，如果不存在，则该系数为1。

资产方法

方法	描述
`downloadAsync`	将资产数据下载到设备缓存目录中的本地文件。
`fromMetaData`	给定资产元数据的情况下，返回代表资产的资产实例。
`fromModule`	给定资产模块或URL的情况下，返回代表资产的资产实例。
`fromURI`	给定资产URI的情况下，返回代表资产的资产实例。
`loadAsync`	为了方便起见而提供的包装Asset.fromModule(module).downloadAsync的辅助工具。

支持的版本

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

其他资源

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

Last updated: 2025年9月30日