有關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(&#39;./reactlogo.png&#39;)}
 />

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

載入原生圖片資源

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

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

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

<Image
 source={nativeImageSource({
 android: &#39;launcher_icon&#39;,
 width: 96,
 height: 96
  })}
/>

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

<Image
 source={nativeImageSource({
 android: &#39;mipmap/launcher_icon&#39;,
 width: 96,
 height: 96
 })}
/>

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

載入網頁圖片

 <Image
 source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
 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: &#39;https://facebook.github.io/react/img/logo_small.png&#39;, width: 38, height: 38},
       {uri: &#39;https://facebook.github.io/react/img/logo_small_2x.png&#39;, width: 76, height: 76},     
        uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;, 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: &#39;transparent&#39;}}
        source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
      >
        <Text style={styles.nestedText}>
          React
        </Text>
      </ImageBackground>

实现效果图如下，一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载，当加载完成隐藏此控件。

网络图片加载监听

对于网络图片的加载，ReactNative提供了一些属性用于图片不同加载时期的监听。

• onLoadStart：图片开始加载时调用

• onLoad：图片加载完成时调用，此时图片加载成功

• onLoadEnd：加载结束后调用，与onLoad不同的是不论成功还是失败，此回调函数都会被执行。

使用方法如下

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

对于iOS，还提供了加载进度的回调函数onProgress

<Image
  style={styles.image}
  onProgress={(event) => {
   console.log(&#39;onProgress&#39;)
   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在线预览，也可以下载项目学习其他组件。

以上是有關ReactNative Image元件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！