React Native-09：图片组件-Image

最新推荐文章于 2024-05-15 09:30:08 发布

臧小川

最新推荐文章于 2024-05-15 09:30:08 发布

阅读量408

点赞数

分类专栏： React Native 文章标签： react native react.js javascript

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/121253571

版权

React Native 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

import React, { Component } from 'react';
import
{
    Image, // 图片组件
    ScrollView, // 滑动组件
} from 'react-native';

export default class App extends Component
{
    render ()
    {
        return (
            <ScrollView>
                {/* 普通图片设置 */}
                <Image style={{ width: 200, height: 200 }} source={require('./assets/羽神1.jpg')} />
                {/* 网络图片设置 */}
                <Image style={{ width: 200, height: 200 }} source={{ uri: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a422a0c62f56684521' }} />
                {/* 图片显示模式 contain 按照正常的比例缩放到整个可以刚好可以放进来 */}
                <Image style={{ margin: 10, width: 200, height: 200, resizeMode: 'contain', borderWidth: 1, borderColor: 'pink' }} source={require('./assets/羽神1.jpg')} />
                {/* 不会变形 放大图片至刚好覆盖整个内容 */}
                <Image style={{ margin: 10, width: 200, height: 200, resizeMode: 'cover', borderWidth: 1, borderColor: 'pink' }} source={require('./assets/羽神1.jpg')} />
                {/* 直接将图片拉伸成设置的大小 会变形 */}
                <Image style={{ margin: 10, width: 200, height: 200, resizeMode: 'stretch', borderWidth: 1, borderColor: 'pink' }} source={require('./assets/羽神1.jpg')} />
            </ScrollView>
        );
    }
}