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 文件夹，里面包含了须要使用到的图片资源

    • 不设置尺寸的状况下，默认会根据图片资源的大小来展现图片
      
      
      

    {/* 不设置尺寸的状况下 */}
        <Image source={require('./img/icon.jpg')}></Image>

    效果：
    

    • 咱们能够经过设置尺寸或者改变 Image 的填充模式来改变所展现的图片样式，这边就先约束宽高，后面会具体介绍怎么改变图片的填充模式
      
      
      

    {/* 设置尺寸的状况下 */}
        <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>

    效果：
    

  • 加载APP中的图片资源

    • 以iOS为例，咱们根据原生的开发习惯把图片放到 images.xcassets 中，这样在编译连接完成后，会将里面的图片统一打包以供使用

    • 若是是Android的话，须要打开目录 android/app/src/res/ ，将图片按照安卓原生开发习惯将不一样大小的图片方便放进四个文件夹内

    • 完成了图片的导入，最好从新运行模拟器，以确保图片已经正确打包，而后就是使用图片的时候了
      
      
      

  {/* 和上面同样，若是不预先设置尺寸的话，依旧是根据图片资源本来的大小进行展现 */}
      {/* 路径书写格式中 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'
          }

  效果：
  

  • contain：容器彻底容纳图片，图片等比例进行拉伸
    
    
    

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

  效果：
  

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

  imgStyle: {
              // 设置背景颜色
              backgroundColor:'green',
              // 设置宽度
              width:Dimensions.get('window').width,
              // 设置高度
              height:150,
              // 设置图片填充模式
              resizeMode:'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>

  效果：
  

  • 能够看出，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 文件夹，里面包含了须要使用到的图片资源

    • 不设置尺寸的状况下，默认会根据图片资源的大小来展现图片
      
      
      

    {/* 不设置尺寸的状况下 */}
        <Image source={require('./img/icon.jpg')}></Image>

    效果：
    

    • 咱们能够经过设置尺寸或者改变 Image 的填充模式来改变所展现的图片样式，这边就先约束宽高，后面会具体介绍怎么改变图片的填充模式
      
      
      

    {/* 设置尺寸的状况下 */}
        <Image source={require('./img/icon.jpg')} style={styles.imgStyle}></Image>

    效果：
    

  • 加载APP中的图片资源

    • 以iOS为例，咱们根据原生的开发习惯把图片放到 images.xcassets 中，这样在编译连接完成后，会将里面的图片统一打包以供使用

    • 若是是Android的话，须要打开目录 android/app/src/res/ ，将图片按照安卓原生开发习惯将不一样大小的图片方便放进四个文件夹内

    • 完成了图片的导入，最好从新运行模拟器，以确保图片已经正确打包，而后就是使用图片的时候了
      
      
      

  {/* 和上面同样，若是不预先设置尺寸的话，依旧是根据图片资源本来的大小进行展现 */}
      {/* 路径书写格式中 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'
          }

  效果：
  

  • contain：容器彻底容纳图片，图片等比例进行拉伸
    
    
    

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

  效果：
  

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

  imgStyle: {
              // 设置背景颜色
              backgroundColor:'green',
              // 设置宽度
              width:Dimensions.get('window').width,
              // 设置高度
              height:150,
              // 设置图片填充模式
              resizeMode:'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>

  效果：
  

  • 能够看出，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组件 的使用就先简单介绍到这里，在后续的文章中，会在实际的开发场景中带你们更多更细致地讲解 Image组件,若是你以为哪里写得很差或者有误，麻烦留言或者用邮箱的方式联系我，固然遇到问题也能够，最后若是喜欢个人文章，还请点个赞并关注，读者的确定是对咱们笔者最大的鼓励，谢谢！