ReactNative Image元件詳解

Code4Android發表於2017-08-06
React元件

原始碼傳送門

最近學習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）

image.png
image.png

在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來提示使用者圖片正在載入，當載入完成隱藏此控制元件。

image.png
image.png

網路圖片載入監聽

對於網路圖片的載入，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線上預覽，也可以下載專案學習其他元件。

相關文章