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

export default class ImageComponent extends Component{


    render(){

        return <View>
            <Image
                style={{width:300,height:200}}
                //这种方式是加载RN本地资源的方法
                source={require('./yangcongtou.jpg')}
                // cover :这是默认属性，图片会按照控件的宽高进行等比例缩放，但是当控件宽或高不能显示图片时，那么有部分内容是不显示的
                // contain:这个能保证图片缩放到不超过这个控件，也就是能够保证显示完整
                // stretch:相当于android的fitXY
                //repeat:只用IOS平台有效果，平铺图片直到填满控件
                //center:居中
                resizeMode={'center'}
            />
            <Image
                //显示网络图片的时候必须要设置宽和高，否则是显示不出来的
                style={{width:300,height:200}}
                source={{uri:"https://heyguys-image.oss-cn-shenzhen.aliyuncs.com/157bf1cfa5b17036d39d97f4bae41b48.jpg"}}
                resizeMode={'contain'}
            />
            <Image
                //在andrdoi中加载项目文件必须把文件放到drawable中,而且要设置宽高，否则显示不出来
                //tintColor这个会把图片轮廓抽取出来并对内部填充颜色
                style={{width:50,height:50,tintColor:'red'}}
                source={{uri:"ic_launcher"}}
                resizeMode={'contain'}
            />
        </View>
    }
}