ReactNative Image組件使用詳解，

ReactNative Image組件使用詳解，

最近學習ReactNative感覺到挺有意思的，在學習的過程中，發現網上一些人寫的文章內容過時了，這主要是ReactNative的版本升級太快，如果你現在看一篇16甚至15年寫的文章，把知識點和官方文檔對比下，會讓你大跌眼鏡。所以奉勸各位想學習ReactNative的同學，選擇學習資料一定要以官方文檔和官方demo為準，其他資料為輔。

Image組件

在ReactNative中Image是用於顯示圖片的組件，和開發Android的時候ImageView控制項相同的效果。它可以用來顯示網狀圖片、靜態資源、臨時的本地圖片、以及本地磁碟上的圖片（如相簿）等。恰當的使用Image組件能更形象更直觀的向使用者傳達資訊。

Image組件附加元件目中的靜態資源

在這裡的靜態資源指的是載入的js部分的圖片，非android,ios原生應用下的資源檔，對於載入這種圖片資源，我們通過require('圖片檔案相對本檔案目錄的的路徑')引入圖片檔案，並將其設定到Image組件的source屬性即可。如下

 <Image style={styles.image}  //  ./表示當前檔案目錄 ../ 父目錄   source={require('./reactlogo.png')} />

需要注意的一點是，上面require中不能用字串拼接路徑，否則會載入報錯。

載入原生圖片資源

在此所說的原生資源指的我們開發android的時候再res目錄下的drawable，或者mipmap目錄。以及ios下對應的資來源目錄。對於載入這種圖片資源和附加元件目中的資源有點不一樣，此處以android為例，如下載入drawable下的檔案

 <Image source={{uri: 'launcher_icon'}} style={{width: 38, height: 38}}/>);

除了通過上面方式載入也可以通過下面方式

<Image source={nativeImageSource({ android: 'launcher_icon', width: 96, height: 96  })}/>

nativeImageSource中可以指定圖片寬高，如果同時在image組件的樣式屬性style設定寬高的話，最終寬高是以style中寬高為準。在上面預設載入的是drawable下的圖片資源，如果想載入mipmap中的資源，可以如下

<Image source={nativeImageSource({ android: 'mipmap/launcher_icon', width: 96, height: 96 })}/>

通過上面方式，我們就可以載入圖片了，如果是新加到drawable下的圖片需要重新編譯運行，否則是不生效的。

載入網狀圖片

 <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 38, height: 38}}/>);

對於載入網狀圖片需要注意的一點就是，需要指定樣式的寬和高，否則圖片將不顯示（不設定預設寬和高為0了）。

Image組件常用的屬性

 style：

• width :設定圖片的寬
• height：設定圖片的高
• borderWidth：設定邊框寬度
• borderColor ：設定邊框顏色
• backgroundColor：設定背景色（有些圖片是透明背景時，一般會用到這個屬性）
• opacity：不透明度，值在0到1之間，1表示不透明，0表示透明。
• tintColor ：給圖片著色，這個屬性用處較多，如，一個黑白圖片，常常會點擊時變成其他顏色圖片，此時可用此屬性

blurRadius 設定圖片的模糊半徑，可模糊圖片

defaultSource 給圖片設定預設圖片，用於載入網路成功之前顯示的圖片。（ios支援）

source

在上面我們介紹了source屬性載入不同的圖片資源，但是還有一個沒講到，它可以接收一個數組作為參數，這樣可根據組件的寬和高自動載入與之匹配的寬和高的圖片。使用方式如下

 <Image  style={{flex: 1}}  source={[       {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},       {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},             uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}      ]} />

resizeMode

該屬性用來設定圖片的縮放模式，對應值如下

• cover：保持圖片寬高比，直到寬度和高度都大於等於[內容] 檢視的尺寸（參考效果）
• contain：在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於[內容] 檢視的尺寸
• stretch：展開圖片且不維持寬高比，直到寬高都剛好填滿容器
• center 置中不展開
• repeat：重複平鋪圖片直到填滿容器。圖片會維持原始大小。（iOS）

在Android上支援GIF和WebP格式圖片

預設情況下Android是不支援GIF和WebP格式的。你需要在build.gradle檔案中根據需要添加對應的依賴。

dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) compile 'com.facebook.fresco:animated-base-support:1.0.1' // For animated GIF support compile 'com.facebook.fresco:animated-gif:1.0.1' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:1.0.1' compile 'com.facebook.fresco:webpsupport:1.0.1' // For WebP support, without animations compile 'com.facebook.fresco:webpsupport:1.0.1'}

如果你在使用GIF的同時還使用了ProGuard，那麼需要在proguard-rules.pro中添加如下規則

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);}

ImageBackground

該組件是Image組件的擴充，它支援嵌套組件。如在圖片上顯示一個文本，則可以通過如下實現

      <ImageBackground        style={{width: 100, height: 100, backgroundColor: 'transparent'}}        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}      >        <Text style={styles.nestedText}>          React        </Text>      </ImageBackground>

實現如下，一般的我們可以嵌套ActivityIndicator來提示使用者圖片正在載入，當載入完成隱藏此控制項。

網狀圖片載入監聽

對於網狀圖片的載入，ReactNative提供了一些屬性用於圖片不同載入時期的監聽。

• onLoadStart：圖片開始載入時調用
• onLoad：圖片載入完成時調用，此時圖片載入成功
• onLoadEnd：載入結束後調用，與onLoad不同的是不論成功還是失敗，此回呼函數都會被執行。

使用方法如下

      <Image        source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}        style={[styles.base, {overflow: 'visible'}]}        onLoadStart={() => console.log('onLoadStart')}        onLoad={(event) => console.log('onLoad') }        onLoadEnd={() => console.log('onLoadEnd')}      />

對於iOS，還提供了載入進度的回呼函數onProgress

<Image  style={styles.image}  onProgress={(event) => {   console.log('onProgress')   this.setState({    progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total)  })}}/>

可以通過參數event.nativeEvent.loaded擷取已經載入的大小，通過event.nativeEvent.total擷取圖片的總大小。

不僅如此，ReactNative還提供了預先載入圖片函數prefetch(url: string)，它可以將圖片下載到磁碟緩衝

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');prefetchTask.then(() => {  //此處可設定狀態，顯示Image組件。此時組件會使用預先載入的圖片資訊。而不用再次載入  console.log('載入圖片成功')}, error => {  console.log('載入圖片失敗')})

好了，今天就介紹到這裡，文中若有錯誤的地方歡迎指正，再次感謝。文中一些樣本源碼，可前往GitHub線上預覽，也可以下載項目學習其他組件。

源碼傳送門

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。