React Native 图片 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 React Native 的 Image 组件在您的移动应用中显示图片。

React Native Image 组件简介

Image 组件允许您在移动应用中显示图片。要使用 Image 组件，请按照以下步骤操作

首先，从 react-native 库中导入 Image 组件

import Image from 'react-native';Code language: JavaScript (javascript)

其次，使用 Image 组件来显示图片

<Image source={uri: imageUri } />Code language: JavaScript (javascript)

源可以是远程 URL 或图片的路径。Image 组件支持不同类型的图片

网络图片是存储在远程服务器上的图片，可以通过 URL 访问。这些图片需要网络连接

<Image source={{uri: 'http://imageUrl'}} />Code language: JavaScript (javascript)

以下示例展示了如何显示位于 https://reactnative.net.cn/img/tiny_logo.png 的 React Native 徽标

import { StyleSheet, Image, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
                style={styles.image} />
        </SafeAreaView >
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 50,
        height: 50,
    },

});

export default App;Code language: JavaScript (javascript)

输出

静态资源是指存储在资源目录（如 assets）中的图片。这些图片会与应用打包在一起，可以在没有网络连接的情况下正常工作

<Image source={require('imagePath')} />Code language: JavaScript (javascript)

例如，以下应用使用 Image 组件来显示项目目录中 assets 目录下的 login.png 图片

import { StyleSheet, Image, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image
                source={require('./assets/login.png')}
                style={styles.image}
            />
        </SafeAreaView >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 200,
        height: 200,
    },
});

export default App;Code language: JavaScript (javascript)

输出

临时的本地图片是指暂时存储在手机上的图片。这些图片通常是在应用运行时下载或创建的

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

来自本地磁盘的图片是指存储在手机本地存储上的图片，例如用手机相机拍摄并保存在相册或图库中的图片

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

请注意，您需要在获取图片之前请求权限。

调整大小模式

通常，图片无法完美地适应视图。为了确定如何调整图片大小以适应图片视图，可以使用 Image 组件的 resizeMode 属性。

resizeMode 属性支持以下值

cover

cover 调整大小模式将缩放图片以填充视图，同时保持纵横比。如果纵横比与图片不同，它可能会裁剪部分图片。

contain

contain 模式会缩放图片以适应视图，同时保持纵横比。因此，整个图片将可见。如果图片的纵横比与视图不同，可能会出现空白区域。

stretch

stretch 模式会拉伸图片以填充视图，但不保持纵横比。它可能会扭曲图片。

repeat

repeat 模式会重复图片以覆盖整个视图。它将创建图片的图块以填充空间。

center

center 模式会保留图片的原始大小，并在视图中居中。如果图片大于视图，它会被裁剪。如果图片小于视图，它不会被缩放。

以下展示了如何使用不同的调整大小模式来显示 React Native 徽标 https://reactnative.net.cn/img/tiny_logo.png

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


const ImageDemo = () => {

    const url = 'https://reactnative.net.cn/img/tiny_logo.png';

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.heading}>Resize Mode</Text>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'cover' }]} />
                <Text style={styles.text}>cover</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'contain' }]} />
                <Text style={styles.text}>contain</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'stretch' }]} />
                <Text style={styles.text}>stretch</Text>
            </View>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'repeat' }]} />
                <Text style={styles.text}>repeat</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'center' }]} />
                <Text style={styles.text}>center</Text>
            </View>
        </SafeAreaView>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',

    },
    image: {
        width: 100,
        height: 150,
    },
    imageWrapper: {
        alignItems: 'center',
        margin: 10,
        borderColor: '#ddd',
        borderWidth: 1,
        padding: 8,
        borderRadius: 8,
    },
    heading: {
        fontSize: 32,
        width: '100%',
        textAlign: 'center',
        marginBottom: 16,
    },
    text: {
        fontSize: 24,
    }

});

export default ImageDemo;Code language: JavaScript (javascript)

输出

总结

使用 React Native 的 Image 组件来显示本地或远程图片。
使用适当的调整大小模式来使图片适应图片视图。

本教程对您有帮助吗？