资源

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

图片、视频、声音、SQLite 数据库文件或字体等文件被视为静态资源。它们不是项目 JavaScript 的一部分，而是应用的一部分。这些资源可以从你的项目本地提供，也可以通过网络远程提供。

¥Files such as images, videos, sounds, database files for SQLite, or fonts are considered static assets. They are not part of your project's JavaScript but are part of your app. These assets can be served locally from your project or remotely over the network.

在本地提供资源

¥Serve an asset locally

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

¥When an asset is stored in your project's file system, it can be embedded in your app binary at build time or loaded at runtime. You can import them like JavaScript modules using require or import statements.

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

¥For example, to render an image called example.png in App.js, you can directly use require to import the image from the project's assets/images directory and pass it to the <Image> component:

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

打包器会自动为导入的图片提供宽度和高度，如上面的示例所示。欲了解更多信息，请参阅 静态图片资源。

¥The bundler automatically provides a width and height for the images imported, as shown in the above example. For more information, see Static Image Resources.

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

¥Libraries such as expo-image and expo-file-system work similarly to the <Image> component with local assets.

资源如何在本地提供服务

¥How are assets served locally

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

¥Locally stored assets are served over HTTP in development. They are automatically bundled into your app binary at the build time for production apps and served from disk on a device.

在构建时加载资源

¥Load an asset at build time

注意：expo-asset 配置插件仅适用于 SDK 51 及更高版本。如果你使用的是较旧的 SDK，则可以加载 使用 useAssets 钩子。

¥Note: The expo-asset config plugin is only available for SDK 51 and above. If you are using an older SDK, you can load a using the useAssets hook.

安装 expo-asset 库并将配置插件添加到应用配置文件中。该插件会将资源文件嵌入到你的原生项目中。

¥Install the expo-asset library and add the config plugin to the app config file. This plugin will embed the asset file in your native project.

{
  "plugins": [
    [
      "expo-asset",

      {
        "assets": ["./assets/images/example.png"]
      }
    ]
  ]
}

assets 选项采用一组一个或多个资源文件或目录名称来将文件链接到原生项目。每个文件的路径都相对于项目的根目录。

¥The assets option takes an array of one or more asset files or directory names to link the file to the native project. The path to each file is relative to the project's root.

当你 创建一个新的原生构建 时，你可以在项目中导入和使用资源，而无需使用 require 或 import 语句。

¥When you create a new native build, you can import and use the asset in your project without using a require or an import statement.

例如，example.png 由上述配置插件链接。你可以直接将其导入到你的组件中并使用其资源名称。

¥For example, the example.png is linked by the above config plugin. You can directly import it into your component and use its resource name.

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

function App() {
  return <Image source="example" />;
}

上面的例子非常简洁。但是，当原生 API 需要特定文件及其资源名称时，此方法可以方便地与该 API 集成并直接使用资源名称。

¥The above example is quite concise. However, when a native API expects a specific file and its resource name, this method makes it convenient to integrate with that API and use the resource name directly.

有关配置插件支持的文件格式的更多信息，请参阅 资源 API 参考。

在运行时加载资源

¥Load an asset at runtime

在你的项目中安装 expo-asset 库。安装步骤完成后，从 expo-asset 库导入 useAssets 钩子。该钩子在本地下载并存储资源，加载资源后，它返回该资源实例的列表。

¥Install the expo-asset library in your project. Once the installation step is complete, import the useAssets hook from the expo-asset library. The hook downloads and stores an asset locally, and after the asset is loaded, it returns a list of that asset's instances.

import { useAssets } from 'expo-asset';

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

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

远程服务资源

¥Serve an asset remotely

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

¥When an asset is served remotely, it is not bundled into the app binary at build time. You can use the URL of the asset resource in your project if it is hosted remotely. For example, pass the URL to the <Image> component to render a remote 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 }} />
  );
}

无法保证使用 Web URL 远程提供的图片的可用性，因为互联网连接可能不可用，或者资源可能被删除。

¥There is no guarantee about the availability of images served remotely using a web URL because an internet connection may not be available, or the asset might be removed.

此外，远程加载资源还需要你提供有关资源的元数据。在此示例中，打包程序无法检索图片的宽度和高度，因此你必须将其显式传递给 <Image> 组件。如果不这样做，图片将默认为 0px x 0px。

¥Additionally, loading assets remotely also requires you to provide metadata about the asset. In this example, the bundler cannot retrieve the image's width and height, so you have to pass that explicitly to the <Image> component. If you don't, the image will default to 0px by 0px.

手动优化方法

¥Manual optimization methods

图片

¥Images

你可以使用以下方法压缩图片：

¥You can compress images using the following:

• guetzli

• pngcrush

• optipng

一些图片优化器是无损的。它们将你的图片重新编码为更小的图片，而不会对显示的像素进行任何更改或丢失。当你需要每个像素与原始图片保持原样时，无损优化器和无损图片格式（如 PNG）是不错的选择。

¥Some image optimizers are lossless. They re-encode your image to be smaller without any change or loss in the pixels displayed. When you need each pixel to be untouched from the original image, a lossless optimizer and a lossless image format like PNG are a good choice.

其他图片优化器有损。优化后的图片与原始图片不同。通常，有损优化器效率更高，因为它们会丢弃视觉信息，从而减小文件大小，同时使图片看起来与人类几乎相同。像 imagemagick 这样的工具可以使用像 SSIM 这样的比较算法来显示两个图片的相似程度。优化后的图片与原始图片的相似度超过 95%，但远低于原始文件大小的 95%，这是很常见的。

¥Other image optimizers are lossy. The optimized image differs from the original image. Often, lossy optimizers are more efficient because they discard visual information that reduces file size while making the image look nearly identical to humans. Tools like imagemagick can use comparison algorithms like SSIM to show how similar two images look. It's quite common for an optimized image that is over 95% similar to the original image to be far less than 95% of the original file size.

字体

¥Fonts

请参阅 等待字体在字体指南中加载 了解更多信息。

¥See Wait for fonts to load in the Fonts guide for more information.

其他资源

¥Other assets

对于 GIF 或电影等资源，或者非代码和非图片资源，你可以自行优化和缩小这些资源。

¥For assets like GIFs or movies, or non-code and non-image assets, it's up to you to optimize and minify those assets.

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

¥Note: GIFs are a very inefficient format. Modern video codecs can produce significantly smaller file sizes with better quality.