React-native Remote picture Modified app does not update

Today, when doing a customer project, there is a need to display the remote image on the app, and the remote image may be updated, but the image name does not change.

In React-native, the display image is the own image component, we all know that react before updating the component will determine whether props or state has changed, when there is a change will not be updated, or will not refresh the page.

That's the problem, the remote image name is unchanged, the props of the incoming image component will not change, the image component will not be refreshed, when the remote image content is modified, how to let the front end display the latest picture?

In the face of this problem, I first found a method on the Internet, said to be two of the same name of the picture, if the content is not the same, then turn to Base64 after the same, you can let the front-end refresh in this way,

I thought it was a good way, so I wrote the following code:

Let buffer = await akita.get ('/Picture address '). Buffer (); Let base64 = ' data:image/jpeg;base64, ' + buffer.tostring (' base64 '); Render () {... <image source={{uri:this.state.base64}}/> ...}

The results can really be updated, I am excited to play a release version put on the real machine up to test, but not two seconds, theapp unexpectedly flashed back ,

Feel no more love in a moment.

Then I began to output the log view, special note: Whether it is the debug version or release version, the following command can see the output log, but ..... In particular, you should try it yourself, it will not explode anyway.

ADB logcat androidruntime:e/

Then entered a lot of logs, all about Java, I was almost crying, and finally, in the log to find an error in the output:

 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)

See this, I have a cold heart, this is what is wrong, completely and their own code to write not on the number Ah,

But no way, can only bite the bullet to go online ba la, hope to find the answer,

The result is ... Disappointing, I didn't find how to solve the bug.

Then I really felt that I could not get it out and had to ask the great God for a dialogue as follows:

Me: Great God, I have a question for you to see for me.

Great God: Rn I've never done it before.

........ I was very cold, and then the great God asked another sentence

Great God: What do you need,

Me: q#$^#$&#@@&@ (see the beginning of the article),

Big God: This is not easy to do, since the request is a network image, you give the picture address after the random parameter is not on the line.

。。。。。。

Well, the great God is the great God, a word let me online ba la information of 4 hours into a heap of waste.

So I did as the great God said,

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}}/> ...}

Well, have to sigh again, the great God is the great God, a word let me write before the code is all wasted, but also solve my problem.

Here, thank the great God.

---------------------------Here are the highlights----------------------------------------------

To make the image refresh, you must ensure that the props of the incoming image component is different, based on the same file name, only:

1, using Base64, different picture content of the Base64 is not the same, but this method may run into the pit I said above.

2, because is the network picture, therefore, each picture address is like when in an API interface , can take the parameter.

After the file name is followed by some parameters, regardless of the parameters, theAPI interface does not change to get the picture content , and, because the parameters are different, the final incoming image component of the props is not the same, so that the image component can be refreshed.

This article is from "__ No acted" blog, please make sure to keep this source http://wuzishu.blog.51cto.com/6826059/1967881

React-native Remote picture Modified app does not update