ReactNative Image組件使用詳解
最近學(xué)習(xí)ReactNative感覺到挺有意思的,在學(xué)習(xí)的過程中,發(fā)現(xiàn)網(wǎng)上一些人寫的文章內(nèi)容過時了,這主要是ReactNative的版本升級太快,如果你現(xiàn)在看一篇16甚至15年寫的文章,把知識點和官方文檔對比下,會讓你大跌眼鏡。所以奉勸各位想學(xué)習(xí)ReactNative的同學(xué),選擇學(xué)習(xí)資料一定要以官方文檔和官方demo為準(zhǔn),其他資料為輔。
Image組件
在ReactNative中Image是用于顯示圖片的組件,和開發(fā)Android的時候ImageView控件相同的效果。它可以用來顯示網(wǎng)絡(luò)圖片、靜態(tài)資源、臨時的本地圖片、以及本地磁盤上的圖片(如相冊)等。恰當(dāng)?shù)氖褂肐mage組件能更形象更直觀的向用戶傳達信息。
Image組件加載項目中的靜態(tài)資源
在這里的靜態(tài)資源指的是加載的js部分的圖片,非android,ios原生應(yīng)用下的資源文件,對于加載這種圖片資源,我們通過require('圖片文件相對本文件目錄的的路徑')引入圖片文件,并將其設(shè)置到Image組件的source屬性即可。如下
<Image style={styles.image} // ./表示當(dāng)前文件目錄 ../ 父目錄 source={require('./reactlogo.png')} />
需要注意的一點是,上面require中不能用字符串拼接路徑,否則會加載報錯。
加載原生圖片資源
在此所說的原生資源指的我們開發(fā)android的時候再res目錄下的drawable,或者mipmap目錄。以及ios下對應(yīng)的資源目錄。對于加載這種圖片資源和加載項目中的資源有點不一樣,此處以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設(shè)置寬高的話,最終寬高是以style中寬高為準(zhǔn)。在上面默認加載的是drawable下的圖片資源,如果想加載mipmap中的資源,可以如下
<Image source={nativeImageSource({ android: 'mipmap/launcher_icon', width: 96, height: 96 })} />
通過上面方式,我們就可以加載圖片了,如果是新加到drawable下的圖片需要重新編譯運行,否則是不生效的。
加載網(wǎng)絡(luò)圖片
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 38, height: 38}} />);
對于加載網(wǎng)絡(luò)圖片需要注意的一點就是,需要指定樣式的寬和高,否則圖片將不顯示(不設(shè)置默認寬和高為0了)。
Image組件常用的屬性
style:
- width :設(shè)置圖片的寬
- height:設(shè)置圖片的高
- borderWidth:設(shè)置邊框?qū)挾?/li>
- borderColor :設(shè)置邊框顏色
- backgroundColor:設(shè)置背景色(有些圖片是透明背景時,一般會用到這個屬性)
- opacity:不透明度,值在0到1之間,1表示不透明,0表示透明。
- tintColor :給圖片著色,這個屬性用處較多,如,一個黑白圖片,常常會點擊時變成其他顏色圖片,此時可用此屬性
blurRadius 設(shè)置圖片的模糊半徑,可模糊圖片
defaultSource 給圖片設(shè)置默認圖片,用于加載網(wǎng)絡(luò)成功之前顯示的圖片。(ios支持)
source
在上面我們介紹了source屬性加載不同的圖片資源,但是還有一個沒講到,它可以接收一個數(shù)組作為參數(shù),這樣可根據(jù)組件的寬和高自動加載與之匹配的寬和高的圖片。使用方式如下
<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
該屬性用來設(shè)置圖片的縮放模式,對應(yīng)值如下
- cover:保持圖片寬高比,直到寬度和高度都大于等于容器視圖的尺寸(參考下圖效果)
- contain:在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都小于等于容器視圖的尺寸
- stretch:拉伸圖片且不維持寬高比,直到寬高都剛好填滿容器
- center 居中不拉伸
- repeat:重復(fù)平鋪圖片直到填滿容器。圖片會維持原始尺寸。(iOS)
在Android上支持GIF和WebP格式圖片
默認情況下Android是不支持GIF和WebP格式的。你需要在build.gradle文件中根據(jù)需要添加對應(yīng)的依賴。
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中添加如下規(guī)則
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }
ImageBackground
該組件是Image組件的擴展,它支持嵌套組件。如在圖片上顯示一個文本,則可以通過如下實現(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>
實現(xiàn)效果圖如下,一般的我們可以嵌套ActivityIndicator來提示用戶圖片正在加載,當(dāng)加載完成隱藏此控件。
網(wǎng)絡(luò)圖片加載監(jiān)聽
對于網(wǎng)絡(luò)圖片的加載,ReactNative提供了一些屬性用于圖片不同加載時期的監(jiān)聽。
- onLoadStart:圖片開始加載時調(diào)用
- onLoad:圖片加載完成時調(diào)用,此時圖片加載成功
- onLoadEnd:加載結(jié)束后調(diào)用,與onLoad不同的是不論成功還是失敗,此回調(diào)函數(shù)都會被執(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')} />
對于iOS,還提供了加載進度的回調(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) })}}/>
可以通過參數(shù)event.nativeEvent.loaded獲取已經(jīng)加載的大小,通過event.nativeEvent.total獲取圖片的總大小。
不僅如此,ReactNative還提供了預(yù)加載圖片函數(shù)prefetch(url: string),它可以將圖片下載到磁盤緩存
var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png'); prefetchTask.then(() => { //此處可設(shè)置狀態(tài),顯示Image組件。此時組件會使用預(yù)加載的圖片信息。而不用再次加載 console.log('加載圖片成功') }, error => { console.log('加載圖片失敗') })
好了,今天就介紹到這里,文中若有錯誤的地方歡迎指正,再次感謝。文中一些示例源碼,可前往GitHub在線預(yù)覽,也可以下載項目學(xué)習(xí)其他組件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細講解
最近在寫 React Native 項目,調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的,看起來很難受。研究了一下這個問題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01useEvent顯著降低Hooks負擔(dān)的原生Hook
這篇文章主要為大家介紹了useEvent顯著降低Hooks負擔(dān)的原生Hook示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07在 React 中使用 Redux 解決的問題小結(jié)
在 React 中組件通信的數(shù)據(jù)流是單向的,頂層組件可以通過 props 屬性向下層組件傳遞數(shù)據(jù),而下層組件不能直接向上層組件傳遞數(shù)據(jù),這篇文章主要介紹了使用react+redux實現(xiàn)彈出框案例,需要的朋友可以參考下2022-10-10使用 React Router Dom 實現(xiàn)路由導(dǎo)航的詳細過程
React Router Dom 是 React 應(yīng)用程序中用于處理路由的常用庫,它提供了一系列組件和 API 來管理應(yīng)用程序的路由,這篇文章主要介紹了使用 React Router Dom 實現(xiàn)路由導(dǎo)航,需要的朋友可以參考下2024-03-03