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,
      backgroundColor: '#C0C0C0',

      // 显示模式:缩略全显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)网络图片:如果没有设置图片的宽高,则无法显示图片,因为网络图片没有默认大小


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/potato512/article/details/80320634
个人分类: react-native学习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭