react-native图片组件Image

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

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

const imgurl = {
    uri:"https://f10.baidu.com/it/u=1934388360,3660384600&fm=72"
};

type Props = {};
export default class ImagePage extends Component<Props> {
    render() {
        return(
          <View style={styles.containerStyle}>
              <View style={{flexDirection:'row',flexWrap:"wrap",justifyContent:"space-around"}}>
                  <Image style={styles.imageUrlStyle} source={imgurl}></Image>

                  <View style={{justifyContent:"center",alignItems:"center"}}>
                      <Image style={[styles.imageUrlStyle,{resizeMode:'contain'}]}
                             source={{uri:'https://f10.baidu.com/it/u=1934388360,3660384600&fm=72'}} />
                      <Text style={{position:"absolute",top:20,left:20,color:"#FF4500",}}>
                          contain全显缩略模式
                      </Text>
                  </View>

                  <Image style={[styles.imageUrlStyle,{resizeMode:'center'}]} source={imgurl}></Image>
                  <Image style={[styles.imageUrlStyle,{resizeMode:'stretch'}]} source={imgurl}></Image>
              </View>

            <Image style={styles.imageLocalStyle} source={require("../../Resources/01.png")}></Image>
          </View>
        );
    }
};

const styles = StyleSheet.create({
  containerStyle: {
      marginTop:20,justifyContent:'center',alignItems:'center',},imageUrlStyle: {
      margin:10,width: 150,height: 150,backgroundColor: '#C0C0C0',// 显示模式：缩略全显contain，拉升全显（会变形）stretch，裁剪后显示（默认）cover
      resizeMode:'cover',imageLocalStyle: {
      margin:10,width: 120,height: 120,// 显示模式：缩略全显contain，拉升全显（会变形）stretch，裁剪后显示（默认）cover
      resizeMode:'contain',}
});

使用注意

1、图片来源

（1）本地图片使用source={require("../../Resources/01.png")

（2）网络图片使用source={{uri:'https://f10.baidu.com/it/u=1934388360,3660384600&fm=72'}

2、图片显示模式

（1）contain：容器完全容纳图片，图片等比例进拉伸；

（2）stretch：图片被拉伸适应容器大小，有可能会发生变形。

（3）cover：图片居中显示，没有被拉伸，超出部分被截断；

（4）center：类似cover

3、图片组件不能包含其他组件

4、图片大小

（1）本地图片：如果没有设置图片的宽高，则默认显示本地图片的实际大小

（2）网络图片：如果没有设置图片的宽高，则无法显示图片，因为网络图片没有默认大小

react-native图片组件Image

相关推荐