从入门小白到精通，玩转React Native鸿蒙跨平台开发：class类图片组件三种图片引入方式

React Native图片组件使用指南：本文介绍了React Native中Image组件的使用方法，包括本地资源、网络图片和Base64数据的加载方式。通过示例代码展示了类组件和函数组件的实现，并详细说明了样式定义、图片缩放控制（capInsets）和性能优化技巧。文章还演示了如何将React Native代码打包为bundle用于OpenHarmony平台，并附带了实际运行效果图。涵盖了从基

2401_86113894

374人浏览 · 2025-12-03 10:52:37

2401_86113894 · 2025-12-03 10:52:37 发布

Image

用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

下面的例子分别演示了如何显示从本地缓存、网络甚至是以’data:'的 base64 uri 形式提供的图片。

请注意对于网络和 base64 数据的图片需要手动指定尺寸！

当图片被缩放的时候，capInsets 指定的角上的尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用（译注：这就是常说的九宫格或者.9 图。

在React Native中，如果你想通过类（class）的方式来使用Image组件，你可以通过创建一个React组件类来实现。下面是一个使用类组件的方式来使用Image组件的示例：

创建一个React类组件

首先，你需要导入React和Image组件。然后，你可以创建一个类组件，并在该组件的render方法中返回一个Image组件。

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

class ImageComponent extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={require('./path/to/your/image.png')} // 确保图片路径正确
          style={{ width: 200, height: 200 }} // 设置图片的样式
        />
      </View>
    );
  }
}

export default ImageComponent;

使用该组件

接下来，你可以在你的应用的其他部分使用这个ImageComponent组件。

import React from 'react';
import { SafeAreaView } from 'react-native';
import ImageComponent from './ImageComponent'; // 确保路径正确

const App = () => {
  return (
    <SafeAreaView>
      <ImageComponent />
    </SafeAreaView>
  );
};

export default App;

注意事项

图片路径：确保source属性中的图片路径是正确的。如果你使用的是本地图片，可以使用require('./path/to/your/image.png')的方式引入。对于网络图片，你可以直接使用URL作为字符串，例如source={{ uri: 'https://example.com/image.png' }}。
样式：通过style属性来设置图片的尺寸、边距等样式。你可以使用内联样式或者直接在样式文件中定义样式。
性能优化：对于网络图片，考虑使用resizeMode属性来控制图片的缩放模式，比如cover, contain, stretch等，以优化显示效果和加载性能。例如：resizeMode="cover"。

通过上述步骤，你可以在React Native中通过类组件的方式使用Image组件。随着React Native的不断发展，函数式组件因其简洁性和Hooks的优势而越来越受欢迎，但在某些情况下，类组件仍然有其用武之地。如果你的项目是基于较早的React Native版本或者有特定的需求需要使用类组件，上述方法仍然有效。不过，对于新的项目或升级的项目，建议尽可能使用函数式组件。

实际案例演示：

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

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

class DisplayAnImage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.tinyLogo}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={styles.tinyLogo}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        />
        <Image
          style={styles.logo}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

export default DisplayAnImage;