react-native之遠程圖片修改後APP不更新

來源:互聯網
上載者:User

標籤: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不更新

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.