編輯:關於Android編程
由於RN在Android平台上不支持gif格式的圖片,今天介紹下我們是怎麼處理這個問題的。
先來看看我們需要實現的效果,這是一張gif圖片,當我們列表上拉加載下一頁的時候需要使用這個效果,如下圖:
我們的解決方案是:將gif切成15張png的圖片,暫且命名為loading1、loading2.... loading15
然後循環的setState修改圖片,就像看電影一樣,達到動畫的效果。
//圖片數組 var loading_imgs = new Array(); //最大圖片張數 const imageLength = 15; //動畫使用的數組下標 const imageIndex = 0; constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,}), …. imageIndex:imageIndex, }; //組裝圖片數組 共15張圖片 loading1 -> loading15 for( i=1;i<= imageLength;i++){ let loadingUri = "loading" + i; let img =; loading_imgs.push(img); } }
為什麼要預加載?
剛開始我們做的時候,也沒有預加載,只是在構造方法中定義了圖片數組loading_imgs,但是在真機上看的時候,發現圖片播放的時候第一次會很卡頓,這是因為圖片加載到內存需要時間,當我們輪播圖片的時候圖片還沒有加載完畢,在視覺上造成卡頓的效果。
我們是把圖片數組初始化在屏幕外面(絕對定位),這種方式不太好。
render() { return ()}; { loading_imgs.map((item,i)=> loading_imgs[i]) }
定義圖片輪播函數_loop
每隔100毫秒切換一張圖片
當數據加載完畢,清楚定時任務,並且將圖片置為第一張
圖片輪播函數 _loop() { this.loopCount++; if (this.loopCount < loading_imgs.length) { this.setState({ imageIndex: this.loopCount, }); }else { this.loopCount = -1; } } //輪播圖片 this.timerPic = setInterval(this._loop.bind(this), 100); //清除圖片輪播效果 this.timer1 && clearInterval(this.timer1); this.loopCount = -1;
在我們做的過程中也發現了一個RN的組件ActivityIndicator的bug,
當我們給ActivityIndicator設置color的時候,在錘子手機上默認color是灰色,當設置為red時,動畫效果沒有。在meizu手機上,默認是綠色,設置為red時,效果正常。
在Android平台上,RN的坑不是一點點啊。
雖然Android給我們提供了眾多組件,但是使用起來都不是很方便,我們開發的APK都有自己的風格,如果使用了系統自帶的組件,總是覺得和應用的主題不著邊際並且看起來也不順心
關於自定義View,相信多數開發者都已經非常熟悉了,網絡上的例子也非常多,各種炫酷吊炸天的自定義View也層出不窮。本文只是一個初級學習教程,對於初學者有參考價值。下面正
高通Quick Charge 2.0快充技術(下稱QC2.0),近日成為了我們關注的焦點,同時也是整個行業熱議的話題。在此之前快充只能通過提升電流的方式來達
關於Android Studio 在2013 Google IO大會上發布的全新IDE Android Studio相信各位猿們並不陌生,截止2014的Goog