资源

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

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

🌐 A static asset is a file that is bundled with your app's binary (native binary). This file type is not part of your app's JavaScript bundle which contain your app's code. Common types of static assets include images, videos, sounds, database files for SQLite, and fonts. These assets can be served locally from your project or remotely over the network.

本指南介绍了在项目中加载和使用静态资源的不同方式，还提供了有关如何优化和最小化资源的其他信息。

🌐 This guide covers different ways you can load and use static assets in your project and also provides additional information on how to optimize and minify assets.

在本地提供资源

🌐 Serve an asset locally

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

🌐 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 it like a JavaScript module 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 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')} />

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

🌐 In the above example, the bundler reads the imported image's metadata and automatically provides the width and height. 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.

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

🌐 Load an asset at build time with expo-asset config plugin

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

🌐 To load an asset at build time, you can use the config plugin from the expo-asset library. This plugin will embed the asset file in your native project.

{
  "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 钩子在运行时加载资源。

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

🌐 Load an asset at runtime with useAssets hook

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

🌐 The useAssets hook from expo-asset library allows loading assets asynchronously. This 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 HomeScreen() {
  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 }} />
  );
}

通过网络 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 an asset's metadata. In the above example, since the bundler cannot retrieve the image's width and height, those values are passed explicitly to the <Image> component. If you don't, the image will default to 0px by 0px.

附加信息

🌐 Additional information

手动优化方法

🌐 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.

其他资源

🌐 Other assets

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

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

注意：GIF 是一种效率很低的格式。现代视频编解码器可以在更小的文件大小下提供更好的质量。

字体

🌐 Fonts

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

🌐 See Add a custom font for more information on how to add a custom font to your app.