React-Native 之常用组件Image使用

前言

学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

Image组件的常见属性

属性方法
- onLoad(function）:当图片加载成功后，回调该方法
- onLoadStart（function）:当图片开始加载的时候调用该方法
- onLoadEnd(function）:当图片加载失败回调该方法，不会管图片加载成功还是失败
- onLayout（function）:当 Image 布局发生变化会调用该方法，调用代码
```
    {nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:缩放比例，（包含可选参数'cover', 'contain', 'stretch'）,当该图片的尺寸超过布局的尺寸时，会根据设置 Mode 进行缩放或剪裁图片
- source{uri:string}:进行标记图片引用，该参数可以为一个网络 url地址 或者一个本地路径
样式属性
- FlexBox：支持弹性盒子风格
- Transforms：支持属性动画
- backgroundcolor：背景颜色
- borderColor：边框颜色
- borderWidth：边框宽度
- borderRadius：边框圆角
- overflow：设置图片尺寸超过容器可以设置显示或隐藏('visible', 'hidden')
- tintColor：颜色设置
- opacity：设置透明度（取值范围0.0（全透明）~ 1.0（不透明））

Image组件的介绍和使用

Image 在开发中是经常接触到的组件，通过它，我们可以展示需要展示的图片资源，在 React Native 中该组件可以通过多种方式价值啊图片资源
在介绍几种加载图片资源的方式之前，先确定一下图片的样式，如下
```
    imgStyle: {
        width:100,
        height:100,
    }
    
```
- 从当前RN项目中加载图片资源，和 html 一样，我们需要将图片放到 RN 项目中，这边我创建了个 img 文件夹，里面包含了需要使用到的图片资源
  
  RN项目中的图片资源
  - 不设置尺寸的情况下，默认会根据图片资源的大小来展示图片
```
    {/* 不设置尺寸的情况下 */}
    <Image source={require('./img/icon.jpg')}></Image>  
```
  效果：
  
  不设置尺寸的情况下
  - 我们可以通过设置尺寸或者改变 Image 的填充模式来改变所展示的图片样式，这边就先约束宽高，后面会具体介绍怎么改变图片的填充模式
```
    {/* 设置尺寸的情况下 */}
    <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
效果：

设置尺寸的情况下
- 加载APP中的图片资源
  - 以iOS为例，我们根据原生的开发习惯把图片放到 images.xcassets 中，这样在编译链接完成后，会将里面的图片统一打包以供使用
    
    iOS图片资源存放位置
  - 如果是Android的话，需要打开目录 android/app/src/res/ ，将图片按照安卓原生开发习惯将不同大小的图片方便放进四个文件夹内
    
    Android图片资源存放位置
  - 完成了图片的导入，最好重新运行模拟器，以确保图片已经正确打包，然后就是使用图片的时候了
```
    {/* 和上面一样，如果不预先设置尺寸的话，依旧是根据图片资源原本的大小进行展示 */}
    {/* 路径书写格式中 image! 是固定写法，后面直接加上图片的名字即可，不可加 .后缀名 */}
    <Image source={require('image!lufei')}></Image>
```
效果：

加载项目图片
- 加载来自网络的图片，图片是我在淘宝上随便拿的图片网络地址，比较大，按照默认的填充方式，会将超出的部分剪裁掉（注意：大括号内的是 uri 不是 url）
```
    {/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */}
    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
    
```
效果：

加载网络图片效果

Image组件填充效果试验场

看完了上面的内容，相信应该对 Image 的使用已经了解的差不多了吧，这里继续为各位见解 Image 的几种填充模式，改变 Image组件的填充模式，需要使用到 resizeMode属性，它包含了3个可选参数，下面就以加载网络图片为例

先加载网络图片，并设置样式

    // 导入Dimensions库
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
                </View>
            );
        }
    }

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
        },

        imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150
        }
    });

效果：

初始化效果

cover( 默认)：图片居中显示且不拉伸图片，超出的部分剪裁掉

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'cover'
        }

效果：

cover 模式效果

contain：容器完全容纳图片，图片等比例进行拉伸

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'contain'
        }

效果：

contain 填充效果

stretch：图片被拉伸至与容器大小一致，可能会发生变形

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'stretch'
        }

效果：

stretch 填充效果

Image组件模拟使用场景

开发中，我们经常将图片作为背景，然后再其上面添加其他组件以丰富项目内容，让项目更美观，那在React Native中，很简单就可以做到

依旧以上面网络图片为例，但是先来修改下样式，看起来跟美观一些

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
            // 设置主轴对齐方式
            justifyContent:'center',
            // 设置侧轴对齐方式
            alignItems:'center'
    },

        imgStyle: {
            backgroundColor:'green',
            width:Dimensions.get('window').width,
            height:200,
            // 设置图片填充模式
            resizeMode:'stretch'
        }
    });

效果：

初始化效果

接下来，我们就直接在 Image组件上添加一个 Text组件

    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}>
    <Text style={{marginTop:100}}>这是一张来自淘宝的图片</Text>
      </Image>

效果：

将Image组件作为背景

可以看出，Text组件确实是盖在 Image组件上，所以在React Native中，将图片作为背景就是这么简单，并不需要进行太复杂的操作

Image组件综合小项目

现在我们就结合前面的一下教程，用最通俗的方式做一个简单的QQ消息模块界面

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

    // 导入Dimensions库
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 因为还没讲到listView,这边就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
            </View>
            );
        }
    }

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'white',
            flex:1,
            // 设置换行方式
            flexWrap:'wrap'
        },

        cellStyle: {
            // 尺寸
            height:44,
            width:Dimensions.get('window').width,
            // 设置背景颜色
            backgroundColor:'white',
            // 设置主轴方向
            flexDirection:'row',
            // 设置侧轴对齐方式
            alignItems:'center'
        },

        imgStyle: {
            width:30,
            height:30,
            // 设置图片填充模式
            resizeMode:'cover',
            // 设置圆角
            borderRadius:15,
            // 设置图片位置
            marginLeft:10
        },

        nameStyle: {
            // 设置昵称位置
            marginLeft:10
        },

        lineStyle: {
            // 背景色
            backgroundColor:'black',
            // 设置尺寸
            width:Dimensions.get('window').width,
            height:1
        }

    });

    AppRegistry.registerComponent('TestRN', () => TestRN);

Image组件的常见属性

属性方法
- onLoad(function）:当图片加载成功后，回调该方法
- onLoadStart（function）:当图片开始加载的时候调用该方法
- onLoadEnd(function）:当图片加载失败回调该方法，不会管图片加载成功还是失败
- onLayout（function）:当 Image 布局发生变化会调用该方法，调用代码
```
    {nativeEvent: {layout: {x, y, width, height}}}
```
- resizeMode:缩放比例，（包含可选参数'cover', 'contain', 'stretch'）,当该图片的尺寸超过布局的尺寸时，会根据设置 Mode 进行缩放或剪裁图片
- source{uri:string}:进行标记图片引用，该参数可以为一个网络 url地址 或者一个本地路径
样式属性
- FlexBox：支持弹性盒子风格
- Transforms：支持属性动画
- backgroundcolor：背景颜色
- borderColor：边框颜色
- borderWidth：边框宽度
- borderRadius：边框圆角
- overflow：设置图片尺寸超过容器可以设置显示或隐藏('visible', 'hidden')
- tintColor：颜色设置
- opacity：设置透明度（取值范围0.0（全透明）~ 1.0（不透明））

Image组件的介绍和使用

Image 在开发中是经常接触到的组件，通过它，我们可以展示需要展示的图片资源，在 React Native 中该组件可以通过多种方式价值啊图片资源
在介绍几种加载图片资源的方式之前，先确定一下图片的样式，如下
```
    imgStyle: {
        width:100,
        height:100,
    }
    
```
- 从当前RN项目中加载图片资源，和 html 一样，我们需要将图片放到 RN 项目中，这边我创建了个 img 文件夹，里面包含了需要使用到的图片资源
  
  RN项目中的图片资源
  - 不设置尺寸的情况下，默认会根据图片资源的大小来展示图片
```
    {/* 不设置尺寸的情况下 */}
    <Image source={require('./img/icon.jpg')}></Image>  
```
  效果：
  
  不设置尺寸的情况下
  - 我们可以通过设置尺寸或者改变 Image 的填充模式来改变所展示的图片样式，这边就先约束宽高，后面会具体介绍怎么改变图片的填充模式
```
    {/* 设置尺寸的情况下 */}
    <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>
```
效果：

设置尺寸的情况下
- 加载APP中的图片资源
  - 以iOS为例，我们根据原生的开发习惯把图片放到 images.xcassets 中，这样在编译链接完成后，会将里面的图片统一打包以供使用
    
    iOS图片资源存放位置
  - 如果是Android的话，需要打开目录 android/app/src/res/ ，将图片按照安卓原生开发习惯将不同大小的图片方便放进四个文件夹内
    
    Android图片资源存放位置
  - 完成了图片的导入，最好重新运行模拟器，以确保图片已经正确打包，然后就是使用图片的时候了
```
    {/* 和上面一样，如果不预先设置尺寸的话，依旧是根据图片资源原本的大小进行展示 */}
    {/* 路径书写格式中 image! 是固定写法，后面直接加上图片的名字即可，不可加 .后缀名 */}
    <Image source={require('image!lufei')}></Image>
```
效果：

加载项目图片
- 加载来自网络的图片，图片是我在淘宝上随便拿的图片网络地址，比较大，按照默认的填充方式，会将超出的部分剪裁掉（注意：大括号内的是 uri 不是 url）
```
    {/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */}
    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
    
```
效果：

加载网络图片效果

Image组件填充效果试验场

看完了上面的内容，相信应该对 Image 的使用已经了解的差不多了吧，这里继续为各位见解 Image 的几种填充模式，改变 Image组件的填充模式，需要使用到 resizeMode属性，它包含了3个可选参数，下面就以加载网络图片为例

先加载网络图片，并设置样式

    // 导入Dimensions库
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}></Image>
                </View>
            );
        }
    }

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
        },

        imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150
        }
    });

效果：

初始化效果

cover( 默认)：图片居中显示且不拉伸图片，超出的部分剪裁掉

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'cover'
        }

效果：

cover 模式效果

contain：容器完全容纳图片，图片等比例进行拉伸

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'contain'
        }

效果：

contain 填充效果

stretch：图片被拉伸至与容器大小一致，可能会发生变形

    imgStyle: {
            // 设置背景颜色
            backgroundColor:'green',
            // 设置宽度
            width:Dimensions.get('window').width,
            // 设置高度
            height:150,
            // 设置图片填充模式
            resizeMode:'stretch'
        }

效果：

stretch 填充效果

Image组件模拟使用场景

开发中，我们经常将图片作为背景，然后再其上面添加其他组件以丰富项目内容，让项目更美观，那在React Native中，很简单就可以做到

依旧以上面网络图片为例，但是先来修改下样式，看起来跟美观一些

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'blue',
            flex:1,
            // 设置主轴对齐方式
            justifyContent:'center',
            // 设置侧轴对齐方式
            alignItems:'center'
    },

        imgStyle: {
            backgroundColor:'green',
            width:Dimensions.get('window').width,
            height:200,
            // 设置图片填充模式
            resizeMode:'stretch'
        }
    });

效果：

初始化效果

接下来，我们就直接在 Image组件上添加一个 Text组件

    <Image source={{uri:'https://img.alicdn.com/tps/TB1OvT9NVXXXXXdaFXXXXXXXXXX-520-280.jpg'}} style={styles.imgStyle}>
    <Text style={{marginTop:100}}>这是一张来自淘宝的图片</Text>
      </Image>

效果：

将Image组件作为背景

可以看出，Text组件确实是盖在 Image组件上，所以在React Native中，将图片作为背景就是这么简单，并不需要进行太复杂的操作

Image组件综合小项目

现在我们就结合前面的一下教程，用最通俗的方式做一个简单的QQ消息模块界面单元格

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

    // 导入Dimensions库
    var Dimensions = require('Dimensions');

    // 入口
    export default class TestRN extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 因为还没讲到listView,这边就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./img/lufei.jpg')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
            </View>
            );
        }
    }

    // 样式
    const styles = StyleSheet.create({
        container: {
            backgroundColor:'white',
            flex:1,
            // 设置换行方式
            flexWrap:'wrap'
        },

        cellStyle: {
            // 尺寸
            height:44,
            width:Dimensions.get('window').width,
            // 设置背景颜色
            backgroundColor:'white',
            // 设置主轴方向
            flexDirection:'row',
            // 设置侧轴对齐方式
            alignItems:'center'
        },

        imgStyle: {
            width:30,
            height:30,
            // 设置图片填充模式
            resizeMode:'cover',
            // 设置圆角
            borderRadius:15,
            // 设置图片位置
            marginLeft:10
        },

        nameStyle: {
            // 设置昵称位置
            marginLeft:10
        },

        lineStyle: {
            // 背景色
            backgroundColor:'black',
            // 设置尺寸
            width:Dimensions.get('window').width,
            height:1
        }

    });

    AppRegistry.registerComponent('TestRN', () => TestRN);

效果：

简单QQ消息界面单元格

Image组件的使用就先简单介绍到这里，在后续的文章中，会在实际的开发场景中带大家更多更细致地讲解 Image组件,如果你觉得哪里写得不好或者有误，麻烦留言或者用邮箱的方式联系我，当然遇到问题也可以，最后如果喜欢我的文章，还请点个赞并关注，读者的肯定是对我们笔者最大的鼓励，谢谢！

最后编辑于：2017.12.04 06:38:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268

React-Native 之 常用组件Image使用

前言

Image组件的常见属性

Image组件的介绍和使用

Image组件填充效果试验场

Image组件模拟使用场景

Image组件综合小项目

Image组件的常见属性

Image组件的介绍和使用

Image组件填充效果试验场

Image组件模拟使用场景

Image组件综合小项目

推荐阅读更多精彩内容

React-Native 之常用组件Image使用