资源

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

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

A 静态资源 是与应用的二进制文件（原生二进制）一起打包的文件。此类文件不属于应用的 JavaScript bundle，其中包含你的应用代码。静态资源的常见类型包括图片、视频、音频、SQLite 数据库文件和字体。这些资源可以从你的项目中本地提供，也可以通过网络远程提供。

本指南介绍了在项目中加载和使用静态资源的不同方式，并提供了有关如何优化和压缩资源的补充信息。

本地提供资源

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

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

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

在上面的示例中，打包器会读取所导入图片的元数据，并自动提供宽度和高度。有关更多信息，请参阅 静态图片资源。

expo-image 和 expo-file-system 等库与 <Image> 组件处理本地资源的方式类似。

资源如何在本地提供

本地存储的资源在开发环境中通过 HTTP 提供。在生产应用中，它们会在构建时自动打包进应用二进制文件，并在设备上从磁盘提供。

使用 expo-asset 配置插件在构建时加载资源

要在构建时加载资源，你可以使用 expo-asset 库中的 配置插件。此插件会将资源文件嵌入到你的原生项目中。

{
  "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 参考。如果你没有看到配置插件支持的文件格式，可以使用 useAssets Hook 在运行时加载资源。

使用 useAssets Hook 在运行时加载资源

expo-asset 库中的 useAssets Hook 允许异步加载资源。此 Hook 会下载资源并将其存储在本地，资源加载完成后会返回该资源实例的列表。

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 提供的远程图片，其可用性无法保证，因为可能无法连接互联网，或者资源可能已被移除。

此外，远程加载资源还要求你提供资源元数据。在上面的示例中，由于打包器无法获取图片的宽度和高度，因此这些值被显式传递给 <Image> 组件。如果不这样做，图片默认会显示为 0px x 0px。

其他信息

手动优化方法

图片

你可以使用以下工具压缩图片：

• guetzli
• pngcrush
• optipng

某些图片优化器是无损的。它们会对图片重新编码，使其更小，同时不会改变或丢失显示的像素。当你需要确保每个像素都与原始图片完全一致时，无损优化器和像 PNG 这样的无损图片格式是不错的选择。

其他图片优化器是有损的。优化后的图片与原始图片不同。通常，有损优化器更高效，因为它们会丢弃可减少文件大小但对人眼几乎没有差别的视觉信息。像 imagemagick 这样的工具可以使用 SSIM 等比较算法来展示两张图片的相似程度。优化后图片与原始图片相似度超过 95% 而文件大小远小于原始文件大小的情况非常常见。

其他资源

对于 GIF 或视频等资源，或者非代码和非图片资源，如何优化和压缩这些资源由你自行决定。

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

字体

有关如何向应用添加自定义字体的更多信息，请参阅 添加自定义字体。