標籤:reactnative react-native react native 重新整理圖片 base64
今天在做客戶的項目時,有一個需求是App上要顯示遠端的圖片,而遠端的圖片有可能會更新,但圖片名不變。
在react-native中,顯示圖片是用的內建的Image組件,大家都知道react在更新群組件之前都會判斷props或state是否有改變,當有改變時才會更新,否則不會重新整理頁面。
那問題就來了,遠端的圖片名不變,傳入Image組件的props就不會變,Image組件就不會重新整理,當遠端的圖片內容被修改之後,該怎麼讓前端同時顯示最新的圖片呢?
在遇到這個問題時,我是先在網上找到一個方法,說是兩個同名的圖片,如果內容不一樣,則轉成base64之後也不一樣,可以以這種方式讓前端重新整理,
我當時也覺得這是一個好方法,於是我寫了如下代碼:
let buffer = await akita.get(‘/圖片地址‘).buffer();let base64 = ‘data:image/jpeg;base64,‘ + buffer.toString(‘base64‘);render(){ ... <Image source={{uri:this.state.base64}}/> ...}
結果真的可以更新了,我興奮的打了一個release版放到真機上去測試,但沒過兩秒,app竟然閃退了,
瞬間感覺不會再愛了。
然後我開始輸出日誌查看,特別註明:不論是debug版還是release版,下面這條命令都能查看到輸出日誌,但.....具體情況還是你們自己試一下吧,反正不會爆炸。
adb logcat androidRuntime:E/
然後就輸入了很多日誌,全是關於java的,我都快哭了,最終,在日誌裡找到一個報錯的輸出:
FATAL EXCEPTION: mqt_jsProcess: com.appscreen, PID: 28053java.lang.RuntimeException: Error calling function: RCTDeviceEventEmitter:emit at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) at android.os.Looper.loop(Looper.java:136) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196) at java.lang.Thread.run(Thread.java:841) Caused by: java.lang.RuntimeException: Failed to create String from JSON: ... 7 more Force finishing activity com.appscreen/.MainActivityD/dalvikvm(28053): GC_CONCURRENT freed 484K, 12% free 4735K/5344K, paused 5ms+3ms, total 50msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 31msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 42msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 12msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 14msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 35msD/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 27msD/dalvikvm(28053): GC_FOR_ALLOC freed 173K, 9% free 4985K/5452K, paused 21ms, total 22msD/dalvikvm( 1014): GC_FOR_ALLOC freed 292K, 22% free 7064K/9032K, paused 65ms, total 65msI/Choreographer(28053): Skipped 37 frames! The application may be doing too much work on its main thread.I/Process (28053): Sending signal. PID: 28053 SIG: 9W/InputDispatcher( 1014): channel ‘41b9ec38 com.appscreen/com.appscreen.MainActivity (server)‘ ~ Consumer closed input channel or an error occurred. events=0x9E/InputDispatcher( 1014): channel ‘41b9ec38 com.appscreen/com.appscreen.MainActivity (server)‘ ~ Channel is unrecoverably broken and will be disposed!W/InputDispatcher( 1014): Attempted to unregister already unregistered input channel ‘41b9ec38 com.appscreen/com.appscreen.MainActivity (server)‘I/ActivityManager( 1014): Process com.appscreen (pid 28053) has died.I/WindowState( 1014): WIN DEATH: Window{41b9ec38 u0 com.appscreen/com.appscreen.MainActivity} Caught a RuntimeException from the binder stub implementation. java.lang.NullPointerException at android.inputmethodservice.IInputMethodWrapper.setSessionEnabled(IInputMethodWrapper.java:280) at com.android.internal.view.IInputMethod$Stub.onTransact(IInputMethod.java:129) at android.os.Binder.execTransact(Binder.java:404) at dalvik.system.NativeStart.run(Native Method)
看到這,我已經心涼了,這是什麼錯,完全和自己寫的代碼對不上號啊,
但是沒辦法,只能硬著頭皮去網上扒拉,希望能找到答案,
結果是........讓人很失望,我沒有找到怎麼解決這個bug。
後來實在感覺弄不出來了,只好去請教大神,對話如下:
我:大神,我這有個問題幫我看一下唄,
大神: RN我也沒搞過啊,
........我很心涼,這時大神又問了一句
大神: 你什麼需求,
我: Q#$^#$&#@@&@(見文章開頭),
大神:這還不好辦,既然請求的是網狀圖片,你給圖片地址後面加隨機參數不就行了。
。。。。。。
好吧,大神就是大神,一句話讓我網上扒拉資料的4個小時變成了一堆廢渣。。
於是我就按大神說的來做,
randomString() { len = 6; var $chars = ‘ABCDEFGHJKLMNPQRSTUVWXYZabcdefhijklmnprstuvwxyz0123456789‘; var maxPos = $chars.length; var pwd = ‘‘; for (let i = 0; i < len; i+=1) { pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd;}render(){ let imgUrl = SERVER_HOST + ‘/pic/‘ + item.pic + ‘.jpg?code=‘ + this.randomString(); ... <Image source={{uri:imgUrl}}/> ...}
好吧,不得不再次感歎一聲,大神就是大神,一句話讓我之前寫的代碼全白費,又同時解決了我的問題。
在此,感謝大神。
---------------------------下面是重點----------------------------------------------
想讓圖片重新整理,就必須保證傳入 Image 組件的props是不一樣的,基於檔案名稱相同,則只能:
1,使用base64,不同圖片內容的base64是不一樣的,但這種方法可能會碰見我上面說的坑。
2,因為是網狀圖片,所以,每一個圖片地址就像當於一個API介面,是可以帶參數的。
檔案名稱後面跟上一些參數後,不管參數是什麼,api介面沒有變就能得到圖片內容,同時,因為參數不一樣,最終傳入Image組件的props也不一樣,這樣就能讓Image組件重新整理了。
本文出自 “__無字書” 部落格,請務必保留此出處http://wuzishu.blog.51cto.com/6826059/1967881
react-native之遠程圖片修改後APP不更新