react-native图片组件Image

刺骨的言语ヽ痛彻心扉 2022-05-25 13:07 214阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![20180515113605344][]

代码示例

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_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[20180515113605344]: /images/20220525/bc792df98e1146a4b8c6f76d80cbb3a2.png