资产

了解在项目中使用静态资源的方法，包括图片、视频、声音、数据库文件和字体。

一个 静态资源 是与应用程序二进制文件（本地二进制）打包在一起的文件。此文件类型不属于包含应用程序代码的 JavaScript 包。常见的静态资源类型包括图片、视频、声音、用于 SQLite 的数据库文件以及字体。这些资源可以从你的项目本地提供，或者通过网络远程提供服务。

本地加载并使用静态资源的不同方式，以及关于如何优化和压缩资源的附加信息。

本地提供资源（Serve an asset locally）

当资产存储在项目的文件系统中时，它可以在构建时嵌入到应用二进制中，或在运行时加载。你可以像 JavaScript 模块一样通过 require 或 import 语句来导入它。

例如，要在 App.js 中渲染名为 example.png 的图片，可以使用 require 从项目的 assets/images 目录导入图片，并将其传递给 <Image> 组件：

<Image source={require('./assets/images/example.png')} />

在上面的示例中，打包工具会读取所导入图片的元数据并自动提供宽度和高度。有关更多信息，请参阅 Static Image Resources.

类似于本地资源的 expo-image 和 expo-file-system 的库，与 <Image> 组件的工作方式类似。

资产如何本地提供

本地存储的资产在开发时通过 HTTP 提供。对于生产应用，它们会在构建时自动捆绑到你的应用二进制中，并在设备上从磁盘提供。

在构建时通过 expo-asset 配置插件加载资源

要在构建时加载资产，可以使用来自 expo-asset 库的 config plugin。该插件会将资产文件嵌入到你的本地项目中。

{
  "expo": {
    "plugins": [
      [
        "expo-asset",
        {
          "assets": ["./assets/images/example.png"]
        }
      ]
    ]
  }
}

import { Image } from 'expo-image';
%%placeholder-start%%... %%placeholder-end%%

export default function HomeScreen() {
  return <Image source={{ uri: 'example' }} style={{ width: 100, height: 100 }} />;
}

不同的文件格式通过 expo-asset 配置插件得到支持。有关这些格式的更多信息，请参阅 Assets API reference。如果你没有看到配置插件支持的文件格式，你可以在运行时使用 useAssets 钩子来加载资源。

在运行时使用 useAssets 钩子加载资源

useAssets 钩子来自 expo-asset 库，允许异步加载资源。该钩子会下载并将资源本地存储，资源加载完成后，它会返回该资源的实例列表。

import { useAssets } from 'expo-asset';

export default function HomeScreen() {
  const [assets, error] = useAssets([
    require('path/to/example-1.jpg'),
    require('path/to/example-2.png'),
  ]);

  return assets ? <Image source={assets[0]} /> : null;
}

远程提供资源

当资源是远程提供时，它不会在构建时打包进应用二进制文件中。如果资源托管在远程位置，你可以在项目中使用该资源的 URL。例如，将 URL 传递给 <Image> 组件以渲染远程图片：

import { Image } from 'expo-image';
%%placeholder-start%%... %%placeholder-end%%

function App() {
  return (
    <Image source={{ uri: 'https://example.com/logo.png' }} style={{ width: 50, height: 50 }} />
  );
}

无法保证通过网页 URL 提供的远程图片的可用性，因为可能无法连接到互联网，或资源已被移除。

此外，加载远程资源还需要你提供资源的元数据。在上面的示例中，由于打包工具（bundler）无法检索图片的宽度和高度，因此将这些值明确传递给 <Image> 组件。如果不这样做，图片将默认为 0px x 0px。

附加信息

手动优化方法

图像

您可以使用以下方法压缩图像：

• guetzli
• pngcrush
• optipng

一些图片优化器是无损的。它们会重新编码你的图片，使其在像素显示上没有任何改变或损失，从而变小。当你需要确保每个像素都保持原样时，无损优化器和像 PNG 这样的无损图片格式是一个不错的选择。

其他图片优化器是有损的。优化后的图片与原始图片不同。通常，有损优化器更高效，因为它们会丢弃会降低文件大小的视觉信息，同时让图片在人眼看来几乎不变。像 imagemagick 这样的工具可以使用诸如 SSIM 的比较算法来显示两张图片看起来有多相似。对于一个与原始图片相似度超过 95% 的优化图片，实际的文件大小往往远小于原始文件的 95%。

其他资源块

对于 GIF 动图、视频等非代码、非图片资源，是否对这些资源进行优化和最小化取决于你。

注意： GIF 是一种非常低效的格式。现代视频编解码器可以在更高的画质下产生显著更小的文件大小。

字体

请参阅 Add a custom font 获取有关如何将自定义字体添加到您的应用程序的更多信息。