React Native元件篇（二） — Image元件

ZY_FlyWay發表於2017-08-15
React Native元件

1、什麼是Image元件

    這裡的Image並不是iOS中的UIImage，而相當於UIImageView元件。通過這個元件可以展示各種各樣的圖片，而且在React Native中該元件可以通過多種方式載入圖片資源。

常見有如下載入方式：
  • 從專案里載入
  • 從APP中載入
  • 載入網路圖片
      


2、Image元件的基本用法

2.1 從當前專案中載入圖片
首先先看一下圖片的位置:



程式碼：

 render() {
    return(
        <View style={{marginTop:100}} >     
           <Image 
          source={require('./image/image1.jpg')} 
          style={{width: 120, height: 120}}  />
        </View>
      );
  }


效果：

2.2 APP專案載入資源（iOS 是放在Asset裡）
還是先看下目錄檔案：




程式碼：

render() {
    return(
        <View style={{marginTop:100}} >     
           <Image 
          source={{uri:'test'}} 
          style={{width: 120, height: 120}}  />
        </View>
      );
  }


效果圖:




2.3 載入來自網路的圖片

程式碼：

render() {
    return(
        <View style={{marginTop:100,alignItems:'center'}} >     
           <Image 
          source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} 
          style={{width: 120, height: 120}}  />
          
        </View>
      );
  }


效果：




3、Image元件的常見屬性


3.1 屬性方法

  • onLayout(function)
    當Image佈局發生改變的，會進行呼叫該方法，呼叫的程式碼為:{nativeEvent: {layout: {x, y, width, height}}}.

  • onLoad (function)
    當圖片載入成功之後，回撥該方法

  • onLoadEnd (function)
    當圖片載入失敗回撥該方法，該不會管圖片載入成功還是失敗

  • onLoadStart (fcuntion)
    當圖片開始載入的時候呼叫該方法

  • resizeMode
    縮放比例,可選引數('cover', 'contain', 'stretch') 該當圖片的尺寸超過佈局的尺寸的時候，會根據設定Mode進行縮放或者裁剪圖片

  • source{uri:string}
    進行標記圖片的引用，該引數可以為一個網路url地址或者一個本地的路徑


先說下載入Image的回撥方法：

<Image 
          source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} 
          style={{width: 120, height: 120}}  
          onLayout={()=>{alert('佈局變化回撥')}}
          onLoad={()=>{console.log('載入回撥')}}
          onLoadEnd={()=>{console.log('載入結束')}}
          onLoadStart={()=>{alert('開始載入')}}
          />

console.log在控制檯輸出，類似OC nslog


想必大家也發現了載入網路圖片的時候，圖片被遮擋住了。這是因為圖片大小已經超過了我們指定寬高的相框，然而相片預設屬性並不是自適應。那我們應該調節resizeMode屬性來達到想要的內容。


  1. cover模式只求在顯示比例不失真的情況下填充整個顯示區域。可以對圖片進行放大或者縮小，超出顯示區域的部分不顯示， 也就是說，圖片可能部分會顯示不了。
  2. contain模式是要求顯示整張圖片, 可以對它進行等比縮小, 圖片會顯示完整,可能會露出Image控制元件的底色。 如果圖片寬高都小於控制元件寬高，則不會對圖片進行放大。
  3. stretch模式不考慮保持圖片原來的寬,高比.填充整個Image定義的顯示區域,這種模式顯示的圖片可能會畸形和失真。
看下contain是否能達到我們想要的效果：



3.2 樣式風格屬性

FlexBox 支援彈性盒子風格
Transforms 支援屬性動畫
backgroundColor 背景顏色
borderColor 邊框顏色
borderWidth 邊框寬度
borderRadius 邊框圓角
overflow 設定圖片尺寸超過容器可以設定顯示或者隱藏('visible','hidden')
tintColor 顏色設定
opacity 設定不透明度0.0(透明)-1.0(完全不透明)



程式碼：

          style={{width: 120, height: 120 ,backgroundColor:'red',borderColor:'green',borderWidth:1,borderRadius:5,tintColor:'yellow',opacity:0.2}}


效果：





相關文章