React Native - 图像

React Native - Images

本章解释如何在 React Native 应用中使用 Image 组件显示图片。我们将涵盖本地静态图片和从网络 URL 加载的图片。

显示本地静态图片

要显示静态图片，您首先需要将图片文件放在项目源代码目录中的某个位置，通常是在 assets 或 images 子文件夹中。然后，您使用 require() 来引用它。

在项目的根目录（或相关的组件文件夹）中创建一个 assets/images 文件夹。
将图片文件（例如 my_logo.png）放入此文件夹。

ImageExample.js (本地图片)

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

// Assuming 'my_logo.png' is in './assets/images/my_logo.png'
// The path for require() is relative to the current JS file.
// If ImageExample.js is in src/components/ and image is in src/assets/images/
// the path would be require('../../assets/images/my_logo.png')

// 假设 'my_logo.png' 在 './assets/images/my_logo.png'
// require() 中的路径是相对于当前 JS 文件而言的。
// 如果 ImageExample.js 在 src/components/ 中，图片在 src/assets/images/ 中，
// 则路径应为 require('../../assets/images/my_logo.png')

const LocalImageExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Local Static Image:</Text>
      <Image
        source={require('./assets/images/my_logo.png')}
        style={styles.localImage}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
  },
  localImage: {
    width: 150,
    height: 150,
    resizeMode: 'contain', // 'cover', 'stretch', 'center' are other options
    // resizeMode: 'contain'，其他选项包括 'cover', 'stretch', 'center'
  },
});

export default LocalImageExample;
// Note: For this example to work, ensure you have an image at the specified path.
// You might need to adjust the path to 'require()' based on your project structure.
// 注意：要使此示例工作，请确保您在指定的路径下有图片文件。
// 您可能需要根据您的项目结构调整 require() 中的路径。

React Native 的打包工具 (bundler)，即 Metro，会将此图片包含在您的应用包中。source 属性接受 require() 的结果。为图片指定 width 和 height 是一个好习惯。

屏幕密度和图片后缀 (@2x, @3x)

React Native 可以自动为设备的屏幕密度选择最佳图片。如果您在同一个文件夹中有 my-icon.png、my-icon@2x.png（用于 2 倍密度屏幕）和 my-icon@3x.png（用于 3 倍密度屏幕）等图片，您可以简单地使用 require('./assets/images/my-icon.png')。React Native 会自动选择合适的文件。

显示网络图片

要显示来自网络 URL 的图片，您需要向 source 属性提供一个包含 uri 键的对象。对于网络图片，您必须显式定义 width 和 height 样式，否则图片可能不会显示。

ImageExample.js (网络图片)

import React from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

const NetworkImageExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Network Image:</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.networkImage}
        // Optional: add accessibilityLabel for screen readers
        // 可选：为屏幕阅读器添加 accessibilityLabel
        accessibilityLabel="React Native Logo"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
  },
  networkImage: {
    width: 200, // Required for network images
    // width: 200, // 网络图片必须设置此项
    height: 200, // Required for network images
    // height: 200, // 网络图片必须设置此项
    resizeMode: 'contain',
    borderWidth: 1,
    borderColor: 'grey',
  },
});

export default NetworkImageExample;

运行应用时，本地图片示例将显示您添加的 my_logo.png，网络图片示例将从互联网上获取并显示 React Native 的 logo。请确保您的设备/模拟器具有网络连接，以便加载网络图片。

Image 的 `resizeMode`

resizeMode 样式属性控制当图片的实际尺寸与 Image 组件的尺寸不同时，应如何调整或缩放图片。常用值包括：

cover: 保持图片的宽高比，同时填充给定尺寸。图片的一部分可能会被裁剪。
contain: 保持图片的宽高比，同时适应给定尺寸。整张图片都可见，可能会有留白区域。
stretch: 独立拉伸宽度和高度，可能会改变宽高比。
repeat: 重复图片以填充框架（仅限 iOS）。
center: 将图片居中放置在框架内。

对于更高级的图片功能，例如缓存控制或渐进式加载，您可以考虑使用第三方库，如 react-native-fast-image。请查阅官方 Image 组件文档以了解更多信息：https://reactnative.dev/docs/image