React Native 图像

17 Mar 2025 | 阅读 2 分钟

Image 组件用于在屏幕上显示图像。图像可以从不同的来源加载，例如静态资源、临时本地文件、本地磁盘、网络图像等。

静态图像资源

静态图像通过将其放置在源代码目录中的某个位置并提供其路径来添加到应用程序中，如下所示：

在上面的语法中，打包程序将在与需要它的组件相同的文件夹中查找 icon_name.png。要在特定平台上加载图像，应通过指定平台作为扩展名来命名，例如 icon_name.ios.png 和 icon_name.android.png。

来自混合应用资源的图像

通过使用 React Native 和平台代码构建的混合应用程序 (UI) 也可以使用捆绑到应用程序中的图像。

通过 Xcode 资产目录或 Android drawable 文件夹包含的图像在使用时无需扩展名。

Android assets 文件夹中的图像使用以下方案：asset:/，带有图像扩展名。

<Image source={{uri: 'asset:/icon_name.png'}} style={{width: 60, height: 60}} />

网络图像

动态和网络图像也可以在 Image 组件中显示。要访问网络图像，需要手动指定图像的尺寸。

建议使用 https 以满足 iOS 上的 App Transport Security 要求。

// GOOD
<Image source={{uri: 'https://url_of_image.png'}}
       style={{width: 60, height: 60}} />

// BAD
<Image source={{uri: 'https://url_of_image.png'}} />

Uri 数据图像

编码后的图像数据在图像组件中使用 "data:" uri 方案。数据图像也需要指定图像的尺寸。

<Image
    style={{width: 66, height: 66}}
    source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

通过嵌套的背景图像

背景图像使用 ImageBackground 组件设置。它也与 Image 的 props 相同。我们可以添加任何组件作为其顶部的子组件。

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

React Native 图像示例

App.js

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

export default class DisplayAnImage extends Component {
    render() {
        return (
            <ImageBackground source = {{uri:'https://tpointtech.cn/tutorial/react-native/images/react-native-tutorial.png'}}
                             style={{width: '100%', height: '100%'}}>
               <Image source={require('./favicon.png')} />
                <Image
                    source={require('/ReactNative/MyReactNativeApp/img/favicon.png')}
                />

                <Image
                    source={require('MyReactNativeApp/img/favicon.png')}
                />
                <Image source={{uri: 'asset:/images/favicon.png'}} style={{width: 60, height: 60}} />
                <Image source = {{uri:'https://tpointtech.cn/images/logo/jtp_logo.png'}}
                       style = {{ width: '80%', height: 70 }}
                />
                <Image
                    style={{width: 60, height: 60}}
                    source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
                />

            </ImageBackground>

        );
    }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

输出