最近學(xué)習(xí)ReactNative感覺(jué)到挺有意思的，在學(xué)習(xí)的過(guò)程中，發(fā)現(xiàn)網(wǎng)上一些人寫(xiě)的文章內(nèi)容過(guò)時(shí)了，這主要是ReactNative的版本升級(jí)太快，如果你現(xiàn)在看一篇16甚至15年寫(xiě)的文章，把知識(shí)點(diǎn)和官方文檔對(duì)比下，會(huì)讓你大跌眼鏡。所以奉勸各位想學(xué)習(xí)ReactNative的同學(xué)，選擇學(xué)習(xí)資料一定要以官方文檔和官方demo為準(zhǔn)，其他資料為輔。

Image組件

在ReactNative中Image是用于顯示圖片的組件，和開(kāi)發(fā)Android的時(shí)候ImageView控件相同的效果。它可以用來(lái)顯示網(wǎng)絡(luò)圖片、靜態(tài)資源、臨時(shí)的本地圖片、以及本地磁盤(pán)上的圖片（如相冊(cè)）等。恰當(dāng)?shù)氖褂肐mage組件能更形象更直觀的向用戶(hù)傳達(dá)信息。

Image組件加載項(xiàng)目中的靜態(tài)資源

在這里的靜態(tài)資源指的是加載的js部分的圖片，非android,ios原生應(yīng)用下的資源文件，對(duì)于加載這種圖片資源，我們通過(guò)require('圖片文件相對(duì)本文件目錄的的路徑')引入圖片文件，并將其設(shè)置到Image組件的source屬性即可。如下

 <Image
 style={styles.image}
  //  ./表示當(dāng)前文件目錄 ../ 父目錄
   source={require('./reactlogo.png')}
 />

需要注意的一點(diǎn)是，上面require中不能用字符串拼接路徑，否則會(huì)加載報(bào)錯(cuò)。

加載原生圖片資源

在此所說(shuō)的原生資源指的我們開(kāi)發(fā)android的時(shí)候再res目錄下的drawable，或者mipmap目錄。以及ios下對(duì)應(yīng)的資源目錄。對(duì)于加載這種圖片資源和加載項(xiàng)目中的資源有點(diǎn)不一樣，此處以android為例，如下加載drawable下的文件

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

除了通過(guò)上面方式加載也可以通過(guò)下面方式

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

nativeImageSource中可以指定圖片寬高，如果同時(shí)在image組件的樣式屬性style設(shè)置寬高的話，最終寬高是以style中寬高為準(zhǔn)。在上面默認(rèn)加載的是drawable下的圖片資源，如果想加載mipmap中的資源，可以如下

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

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

加載網(wǎng)絡(luò)圖片

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

對(duì)于加載網(wǎng)絡(luò)圖片需要注意的一點(diǎn)就是，需要指定樣式的寬和高，否則圖片將不顯示（不設(shè)置默認(rèn)寬和高為0了）。

Image組件常用的屬性

 style：

• width :設(shè)置圖片的寬
• height：設(shè)置圖片的高
• borderWidth：設(shè)置邊框?qū)挾?/li>
• borderColor ：設(shè)置邊框顏色
• backgroundColor：設(shè)置背景色（有些圖片是透明背景時(shí)，一般會(huì)用到這個(gè)屬性）
• opacity：不透明度，值在0到1之間，1表示不透明，0表示透明。
• tintColor ：給圖片著色，這個(gè)屬性用處較多，如，一個(gè)黑白圖片，常常會(huì)點(diǎn)擊時(shí)變成其他顏色圖片，此時(shí)可用此屬性

blurRadius 設(shè)置圖片的模糊半徑，可模糊圖片

defaultSource 給圖片設(shè)置默認(rèn)圖片，用于加載網(wǎng)絡(luò)成功之前顯示的圖片。（ios支持）

source

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

 <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

該屬性用來(lái)設(shè)置圖片的縮放模式，對(duì)應(yīng)值如下

• cover：保持圖片寬高比，直到寬度和高度都大于等于容器視圖的尺寸（參考下圖效果）
• contain：在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小于等于容器視圖的尺寸
• stretch：拉伸圖片且不維持寬高比，直到寬高都剛好填滿(mǎn)容器
• center 居中不拉伸
• repeat：重復(fù)平鋪圖片直到填滿(mǎn)容器。圖片會(huì)維持原始尺寸。（iOS）

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

默認(rèn)情況下Android是不支持GIF和WebP格式的。你需要在build.gradle文件中根據(jù)需要添加對(duì)應(yīng)的依賴(lài)。

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的同時(shí)還使用了ProGuard，那么需要在proguard-rules.pro中添加如下規(guī)則

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

ImageBackground

該組件是Image組件的擴(kuò)展，它支持嵌套組件。如在圖片上顯示一個(gè)文本，則可以通過(guò)如下實(shí)現(xiàn)

      <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>

實(shí)現(xiàn)效果圖如下，一般的我們可以嵌套ActivityIndicator來(lái)提示用戶(hù)圖片正在加載，當(dāng)加載完成隱藏此控件。

網(wǎng)絡(luò)圖片加載監(jiān)聽(tīng)

對(duì)于網(wǎng)絡(luò)圖片的加載，ReactNative提供了一些屬性用于圖片不同加載時(shí)期的監(jiān)聽(tīng)。

• onLoadStart：圖片開(kāi)始加載時(shí)調(diào)用
• onLoad：圖片加載完成時(shí)調(diào)用，此時(shí)圖片加載成功
• onLoadEnd：加載結(jié)束后調(diào)用，與onLoad不同的是不論成功還是失敗，此回調(diào)函數(shù)都會(huì)被執(zhí)行。

使用方法如下

      <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')}
      />

對(duì)于iOS，還提供了加載進(jìn)度的回調(diào)函數(shù)onProgress

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

可以通過(guò)參數(shù)event.nativeEvent.loaded獲取已經(jīng)加載的大小，通過(guò)event.nativeEvent.total獲取圖片的總大小。

不僅如此，ReactNative還提供了預(yù)加載圖片函數(shù)prefetch(url: string)，它可以將圖片下載到磁盤(pán)緩存

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');
prefetchTask.then(() => {
  //此處可設(shè)置狀態(tài)，顯示Image組件。此時(shí)組件會(huì)使用預(yù)加載的圖片信息。而不用再次加載
  console.log('加載圖片成功')
}, error => {
  console.log('加載圖片失敗')
})

好了，今天就介紹到這里，文中若有錯(cuò)誤的地方歡迎指正，再次感謝。文中一些示例源碼，可前往GitHub在線預(yù)覽，也可以下載項(xiàng)目學(xué)習(xí)其他組件。

源碼傳送門(mén)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論