今天在做客户的项目时，有一个需求是App上要显示远端的图片，而远端的图片有可能会更新，但图片名不变。
在react-native中，显示图片是用的自带的Image组件，大家都知道react在更新组件之前都会判断props或state是否有改变，当有改变时才会更新，否则不会刷新页面。
那问题就来了，远端的图片名不变，传入Image组件的props就不会变，Image组件就不会刷新，当远端的图片内容被修改之后，该怎么让前端同时显示最新的图片呢？
在遇到这个问题时，我是先在网上找到一个方法，说是两个同名的图片，如果内容不一样，则转成base64之后也不一样，可以以这种方式让前端刷新，
letbuffer=awaitakita.get('/图片地址').buffer();
letbase64='data:image/jpeg;base64,'+buffer.toString('base64');
render(){
...
<Imagesource={{uri:this.state.base64}}/>
...
}
结果真的可以更新了，我兴奋的打了一个release版放到真机上去测试，但没过两秒，app竟然闪退了，
瞬间感觉不会再爱了。
然后我开始输出日志查看，特别注明：不论是debug版还是release版，下面这条命令都能查看到输出日志，但.....具体情况还是你们自己试一下吧，反正不会爆炸。
adblogcatandroidRuntime:E/
然后就输入了很多日志，全是关于java的，我都快哭了，最终，在日志里找到一个报错的输出：
FATALEXCEPTION:mqt_js Process:com.appscreen,PID:28053 java.lang.RuntimeException:Errorcallingfunction:RCTDeviceEventEmitter:emit atcom.facebook.react.bridge.queue.NativeRunnable.run(NativeMethod) atandroid.os.Handler.handleCallback(Handler.java:733) atandroid.os.Handler.dispatchMessage(Handler.java:95) atcom.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) atandroid.os.Looper.loop(Looper.java:136) atcom.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196) atjava.lang.Thread.run(Thread.java:841) Causedby:java.lang.RuntimeException:FailedtocreateStringfromJSON: ...7more Forcefinishingactivitycom.appscreen/.MainActivity D/dalvikvm(28053):GC_CONCURRENTfreed484K,12%free4735K/5344K,paused5ms+3ms,total50ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked31ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked42ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked12ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked14ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked35ms D/dalvikvm(28053):WAIT_FOR_CONCURRENT_GCblocked27ms D/dalvikvm(28053):GC_FOR_ALLOCfreed173K,9%free4985K/5452K,paused21ms,total22ms D/dalvikvm(1014):GC_FOR_ALLOCfreed292K,22%free7064K/9032K,paused65ms,total65ms I/Choreographer(28053):Skipped37frames!Theapplicationmaybedoingtoomuchworkonitsmainthread. I/Process(28053):Sendingsignal.PID:28053SIG:9 W/InputDispatcher(1014):channel'41b9ec38com.appscreen/com.appscreen.MainActivity(server)'~Consumerclosedinputchanneloranerroroccurred.events=0x9 E/InputDispatcher(1014):channel'41b9ec38com.appscreen/com.appscreen.MainActivity(server)'~Channelisunrecoverablybrokenandwillbedisposed! W/InputDispatcher(1014):Attemptedtounregisteralreadyunregisteredinputchannel'41b9ec38com.appscreen/com.appscreen.MainActivity(server)' I/ActivityManager(1014):Processcom.appscreen(pid28053)hasdied. I/WindowState(1014):WINDEATH:Window{41b9ec38u0com.appscreen/com.appscreen.MainActivity} CaughtaRuntimeExceptionfromthebinderstubimplementation. java.lang.NullPointerException atandroid.inputmethodservice.IInputMethodWrapper.setSessionEnabled(IInputMethodWrapper.java:280) atcom.android.internal.view.IInputMethod$Stub.onTransact(IInputMethod.java:129) atandroid.os.Binder.execTransact(Binder.java:404) atdalvik.system.NativeStart.run(NativeMethod)
看到这，我已经心凉了，这是什么错，完全和自己写的代码对不上号啊，
但是没办法，只能硬着头皮去网上扒拉，希望能找到答案，
结果是........让人很失望，我没有找到怎么解决这个bug。
后来实在感觉弄不出来了，只好去请教大神，对话如下：
我：大神，我这有个问题帮我看一下呗，
大神： RN我也没搞过啊，
........我很心凉，这时大神又问了一句
大神： 你什么需求，
我： Q#$^#$&#@@&@（见文章开头）,
大神：这还不好办，既然请求的是网络图片，你给图片地址后面加随机参数不就行了。
。。。。。。
好吧，大神就是大神，一句话让我网上扒拉资料的4个小时变成了一堆废渣。。
于是我就按大神说的来做，
randomString(){
len=6;
var$chars='ABCDEFGHJKLMNPQRSTUVWXYZabcdefhijklmnprstuvwxyz0123456789';
varmaxPos=$chars.length;
varpwd='';
for(leti=0;i<len;i+=1){
pwd+=$chars.charAt(Math.floor(Math.random()*maxPos));
}
returnpwd;
}
render(){
letimgUrl=SERVER_HOST+'/pic/'+item.pic+'.jpg?code='+this.randomString();
...
<Imagesource={{uri:imgUrl}}/>
...
}
好吧，不得不再次感叹一声，大神就是大神，一句话让我之前写的代码全白费，又同时解决了我的问题。
在此，感谢大神。
---------------------------下面是重点----------------------------------------------
想让图片刷新，就必须保证传入 Image 组件的props是不一样的，基于文件名相同，则只能：
1，使用base64，不同图片内容的base64是不一样的，但这种方法可能会碰见我上面说的坑。
2，因为是网络图片，所以，每一个图片地址就像当于一个API接口，是可以带参数的。
文件名后面跟上一些参数后，不管参数是什么，api接口没有变就能得到图片内容，同时，因为参数不一样，最终传入Image组件的props也不一样，这样就能让Image组件刷新了。
