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組件,若是你以爲哪裏寫得很差或者有誤，麻煩留言或者用郵箱的方式聯繫我，固然遇到問題也能夠，最後若是喜歡個人文章，還請點個贊並關注，讀者的確定是對咱們筆者最大的鼓勵，謝謝！