了解如何使用本地和远程资源。
图片、字体、视频、声音以及你的应用所依赖的非 JavaScript 的任何其他文件都被视为资源。
¥Images, fonts, videos, sounds, and any other file that your app depends on that is not JavaScript are considered to be an asset.
¥Local assets
可以使用 require 或 import 像 JavaScript 模块一样导入存储在文件系统上的资源。例如，在 App.js 中，要渲染存储在项目的 asset/images 目录中的名为 example.png 的图片，你可以使用 require 导入该图片，然后将其传递给 Image 组件：
¥Assets stored on your file system can be imported like JavaScript modules, using require or import. For example, from App.js, to render an image called example.png that is stored within the project's assets/images directory you can use require to import the image and then pass it to the Image component:
<Image source={require('./assets/images/example.png')} />
打包器将自动为以此方式导入的图片提供宽度和高度。欲了解更多信息，请参阅 静态图片资源。
¥The bundler will automatically provide a width and height for images imported this way. For more information, see Static Image Resources.
像 expo-av 和 expo-file-system 这样的库的工作方式与 Image 类似，都使用本地资源。
¥Libraries like expo-av and expo-file-system work similar to Image with local assets.
这种方式的本地资源将在开发过程中通过 HTTP 提供服务，并且它们将在构建时自动打包到你的应用二进制文件中。
¥Local assets this way will be served over HTTP in development, and they will be automatically bundled into your app binary at build time.
当你使用 EAS 更新 发布应用更新时，你的资源将从 CDN 上传并提供服务。任何尚未包含在接收更新的版本中的资源都将在启动更新之前下载。在 Expo Go 中测试应用时，资源将在项目运行时下载。你可以在应用启动之前使用 useAssets 钩子加载这些内容。
¥When you publish an update to your app with EAS Update, your assets will be uploaded and served from a CDN. Any asset that is not already included in the build that receives the update will be downloaded before launching the update. When testing an app in Expo Go, assets will be downloaded as the project is running. You can load these before your app starts with the useAssets hook.
¥Remote assets
要渲染远程图片，请将图片的 URL 传递给 Image 组件：
¥To render a remote image, pass the URL to the image to the Image component:
<Image source={{ uri: 'https://example.com/logo.png' }} />
无法保证你通过网址引用的图片的可用性，因为互联网连接可能不可用或者资源可能已被删除。此外，我们没有关于任意网址的相同数量的信息：当你的资源在本地文件系统上可用时，打包程序可以读取一些元数据（例如宽度和高度）并将其传递到你的应用，因此你无需指定宽度和高度。指定远程 Web URL 时，你需要显式指定宽度和高度，否则默认为 0x0。最后，正如你稍后将看到的，这两种情况下的缓存行为是不同的。
¥No guarantee can be made about the availability of the images that you refer to with a web URL because an internet connection may not be available or the asset may have been removed. Additionally, we don't have the same amount of information about arbitrary web URLs: when your assets are available on the local filesystem, the bundler can read some metadata (for example, width and height) and pass that through to your app, so you don't need to specify a width and height. When specifying a remote web URL, you will need to explicitly specify a width and height, or it will default to 0x0. Lastly, as you will see later, caching behavior is different in both cases.
像 expo-av 和 expo-file-system 这样的库的工作方式与 Image 类似，都使用本地资源。
¥Libraries like expo-av and expo-file-system work similar to Image with local assets.
远程资源不会在构建时打包到二进制文件中。它们也不被视为 EAS 更新 打包包的一部分。
¥Remote assets are not bundled into binaries at build time. They are also not considered part of an EAS Update bundle.
¥Customizing supported asset extensions
如果需要导入 Metro 默认无法识别的文件类型，可以修改 Metro 配置。例如，你可能希望使用 .db 将数据库导入到你的应用中。详细了解如何在 定制 Metro 中自定义 Metro for Android 和 iOS 支持的资源扩展。
¥If you need to import a file type that is not recognized by Metro by default, you can modify the Metro configuration. For example, you may want to use the .db to import a database into your app. Read more about how to customize the asset extensions supported by Metro for Android and iOS in Customizing Metro.
¥Optimization
¥Images
你可以使用 guetzli、pngcrush 或 optipng 等工具来压缩图片。imagemin 是另一个程序和 JS 库，支持各种优化器的插件。许多在线服务可以为你优化图片。
¥You can compress images using tools such as guetzli, pngcrush, or optipng. imagemin is another program and JS library that supports plugins for various optimizers. Many online services can optimize your images for you.
一些图片优化器是无损的。这意味着它们会将你的图片重新编码为更小，而显示的像素不会发生任何变化或丢失。当你需要不影响原始图片的每个像素时，无损优化器和无损图片格式（如 PNG）是不错的选择。
¥Some image optimizers are lossless. This means they re-encode your image to be smaller without any change, or loss, in the pixels that are displayed. When you need each pixel to be untouched from the original image, a lossless optimizer and a lossless image format like PNG is a good choices.
其他图片优化器是有损的，这意味着优化后的图片与原始图片不同。通常，有损优化器效率更高，因为它们会丢弃视觉信息，从而减小文件大小，同时使图片对人类来说看起来几乎相同。像 imagemagick 这样的工具可以使用像 SSIM 这样的比较算法来了解两个图片看起来有多相似。与原始图片相似度超过 95% 的优化图片远小于原始文件大小的 95%，这是很常见的！
¥Other image optimizers are lossy, which means the optimized image is different than the original image. Often, lossy optimizers are more efficient because they discard visual information that reduces file size while making the image look nearly the same to humans. Tools like imagemagick can use comparison algorithms like SSIM to give a sense of 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
如上所述，在生产版本中，你的本地资源都将被打包并从磁盘加载，而不是像原生应用那样通过网络加载，但在开发版本中预览时必须通过网络加载它们。在网络上，字体加载问题是通过以下方式得知的：无样式文本 Flash (FOUT)、不可见文本 Flash (FOIT) 和人造文本 Flash (FOFT)。
¥As explained above, in production builds, your local assets will all be bundled and loaded from disk rather than over the network as expected for native apps, but they must be loaded over the network when previewing in development builds. On the web, the font loading problem is known by: Flash of Unstyled Text (FOUT), Flash of Invisible Text (FOIT), and Flash of Faux Text (FOFT).
@expo/vector-icons 图标的默认行为是首次加载时 FOIT，在后续加载时，字体将自动缓存。你可能希望在初始加载屏幕期间使用 useFonts 预加载字体。例如：
¥The default behavior with @expo/vector-icons icons is a FOIT on the first load, and on subsequent loads, the font will be automatically cached. You may want to preload fonts during the initial loading screen with useFonts. For example:
useFonts([require('./assets/fonts/ComicSans.ttf', FontAwesome.font)]);