ReactNative Image 组件

最新推荐文章于 2024-03-25 08:32:33 发布

Carlos.Guo

最新推荐文章于 2024-03-25 08:32:33 发布

阅读量341

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： ReactNative image

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73648075

ReactNative 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了React Native中Image组件的基本用法，包括如何加载网络图片和本地静态资源图片，并展示了图片的不同展示模式及iOS平台特有的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative Image 组件

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

/** 8、Image 组件
 * 用于显示图片的组件，包括网络图片，静态资源等
 * resizeMode 图片适应模式 cover contain stretch
 * source 图片应用地址
 * ios 支持属性 onLoad onLoadEnd onLoadStart onProgress
 *
 * 需求：显示两张图片 网络图片、静态资源图片
 *http://img.zcool.cn/community/01bf1655e514b16ac7251df840273f.jpg
 *
 */
let RnDemo = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <View style={styles.net}>
                    <Image style={styles.netImg}
                           source={{uri: "http://img.zcool.cn/community/01bf1655e514b16ac7251df840273f.jpg"}}
                    />
                </View>
                <View style={styles.local}>
                    <Image
                        style={styles.localImg}
                        source={require("./images/img_1.jpg")}
                    />
                </View>
            </View>
        );
    }
});
let styles = StyleSheet.create({
    container: {
        flex: 1,
        margin: 25,
        alignItems: 'center'
    },
    net: {
        marginTop: 30,
        width: 300,
        height: 240,
        justifyContent: 'center',
        alignItems: "center",
        backgroundColor: "cyan"
    },
    netImg: {
        width: 280,
        height: 200,
        // resizeMode:"cover",
        backgroundColor: "gray",
    },
    local: {
        marginTop: 30,
        width: 300,
        height: 200,
        justifyContent: 'center',
        alignItems: "center",
        backgroundColor: "yellow"
    },
    localImg: {
        width: 180,
        height: 150,
        // resizeMode:"contain",
        backgroundColor: "gray",
    }
});