react-nativeのリモート画像修正後のAPPは更新されません
4893 ワード
今日、お客様のプロジェクトでは、Appにリモートの画像を表示する必要がありますが、リモートの画像は更新される可能性がありますが、画像名は変わりません.
react-nativeでは、画像を表示するのに付属のImageコンポーネントが使用されており、reactはコンポーネントを更新する前にpropsやstateが変更されたかどうかを判断し、変更があった場合に更新され、そうでなければページが更新されないことはよく知られています.
では、問題は、遠端の画像名が変わらず、Imageコンポーネントに伝わるpropsが変わらず、Imageコンポーネントがリフレッシュされず、遠端の画像内容が修正された後、どのようにしてフロントエンドに最新の画像を同時に表示させるのかということです.
この問題に遭遇したとき、私はまずネット上で同じ名前の画像を2つ見つけて、内容が違うとbase 64に変わってからも違って、このようにフロントエンドをリフレッシュすることができます.
私も良い方法だと思って、次のコードを書きました.
結果は本当に更新することができて、私は興奮してrelease版を打って本物の機械に置いてテストしましたが、2秒もしないうちに、appは意外にもフラッシュバックしました.
一瞬にしてもう爱しないような気がします.
それから私は出力ログの表示を始めました.特に、debug版でもrelease版でも、次のコマンドで出力ログを表示できますが、具体的には自分で試してみてください.どうせ爆発しません.
それから多くのログを入力して、すべてjavaについて、私はすべて泣きそうになって、最終的に、ログの中で1つの間違いを報告する出力を見つけました:
これを見て、私はもう心が冷たくなって、これは何が間違っていて、完全に自分の書いたコードと番号が合っていません.
でも仕方なく、無理にネットをすり抜けて、答えを見つけてほしいのですが、
結果は......がっかりして、このバグをどう解決するか見つからなかった.
それから本当に出てこないと感じて、仕方なく大神に教えてもらって、会話は以下の通りです.
私:神様、ちょっと問題があったら見てください.
大神: RN私もやったことないでしょう.
...私はとても心が冷たくて、この时大神はまた1つ聞きました
大神:何が必要ですか.
私:Q#$^#$@&@(冒頭参照)、
大神:それは困りますね.ネット上の画像を要求した以上、画像のアドレスの後ろにランダムなパラメータを加えればいいのではないでしょうか.
......
はい、大神は大神で、一言で私のネット上で資料をかき混ぜた4時間がクズになりました.
そこで私は大神の言うとおりにしました.
はい、もう一度感嘆せざるを得ません.大神は大神で、一言で前に書いたコードが無駄になり、同時に私の問題を解決しました.
ここで、大神に感謝します.
----------------------------------------------------------------------------------------------
画像をリフレッシュするには、Imageコンポーネントに転送されるpropsが異なることを保証する必要があります.ファイル名が同じであれば、
1、base 64を使用すると、画像の内容によってbase 64が異なりますが、この方法は私が言った穴にぶつかる可能性があります.
2,ネットワークピクチャであるため,各ピクチャアドレスはAPIインタフェースのようにパラメータ付きであってもよい.
ファイル名の後ろにパラメータが付いてくると、パラメータが何であれapiインタフェースが変わらずに画像の内容が得られます.また、パラメータが異なるため、最終的にImageコンポーネントに転送されるpropsも異なり、Imageコンポーネントをリフレッシュできます.
react-nativeでは、画像を表示するのに付属のImageコンポーネントが使用されており、reactはコンポーネントを更新する前にpropsやstateが変更されたかどうかを判断し、変更があった場合に更新され、そうでなければページが更新されないことはよく知られています.
では、問題は、遠端の画像名が変わらず、Imageコンポーネントに伝わるpropsが変わらず、Imageコンポーネントがリフレッシュされず、遠端の画像内容が修正された後、どのようにしてフロントエンドに最新の画像を同時に表示させるのかということです.
この問題に遭遇したとき、私はまずネット上で同じ名前の画像を2つ見つけて、内容が違うとbase 64に変わってからも違って、このようにフロントエンドをリフレッシュすることができます.
私も良い方法だと思って、次のコードを書きました.
let buffer = await akita.get('/ ').buffer();
let base64 = 'data:p_w_picpath/jpeg;base64,' + buffer.toString('base64');
render(){
...
![]()
...
}結果は本当に更新することができて、私は興奮してrelease版を打って本物の機械に置いてテストしましたが、2秒もしないうちに、appは意外にもフラッシュバックしました.
一瞬にしてもう爱しないような気がします.
それから私は出力ログの表示を始めました.特に、debug版でもrelease版でも、次のコマンドで出力ログを表示できますが、具体的には自分で試してみてください.どうせ爆発しません.
adb logcat androidRuntime:E/それから多くのログを入力して、すべてjavaについて、私はすべて泣きそうになって、最終的に、ログの中で1つの間違いを報告する出力を見つけました:
FATAL EXCEPTION: mqt_js
Process: com.appscreen, PID: 28053
java.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/.MainActivity
D/dalvikvm(28053): GC_CONCURRENT freed 484K, 12% free 4735K/5344K, paused 5ms+3ms, total 50ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 31ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 42ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 12ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 14ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 35ms
D/dalvikvm(28053): WAIT_FOR_CONCURRENT_GC blocked 27ms
D/dalvikvm(28053): GC_FOR_ALLOC freed 173K, 9% free 4985K/5452K, paused 21ms, total 22ms
D/dalvikvm( 1014): GC_FOR_ALLOC freed 292K, 22% free 7064K/9032K, paused 65ms, total 65ms
I/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: 9
W/InputDispatcher( 1014): channel '41b9ec38 com.appscreen/com.appscreen.MainActivity (server)' ~ Consumer closed input channel or an error occurred. events=0x9
E/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)これを見て、私はもう心が冷たくなって、これは何が間違っていて、完全に自分の書いたコードと番号が合っていません.
でも仕方なく、無理にネットをすり抜けて、答えを見つけてほしいのですが、
結果は......がっかりして、このバグをどう解決するか見つからなかった.
それから本当に出てこないと感じて、仕方なく大神に教えてもらって、会話は以下の通りです.
私:神様、ちょっと問題があったら見てください.
大神: RN私もやったことないでしょう.
...私はとても心が冷たくて、この时大神はまた1つ聞きました
大神:何が必要ですか.
私:Q#$^#$@&@(冒頭参照)、
大神:それは困りますね.ネット上の画像を要求した以上、画像のアドレスの後ろにランダムなパラメータを加えればいいのではないでしょうか.
......
はい、大神は大神で、一言で私のネット上で資料をかき混ぜた4時間がクズになりました.
そこで私は大神の言うとおりにしました.
randomString() {
len = 6;
var $chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefhijklmnprstuvwxyz0123456789';
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i
...
}はい、もう一度感嘆せざるを得ません.大神は大神で、一言で前に書いたコードが無駄になり、同時に私の問題を解決しました.
ここで、大神に感謝します.
----------------------------------------------------------------------------------------------
画像をリフレッシュするには、Imageコンポーネントに転送されるpropsが異なることを保証する必要があります.ファイル名が同じであれば、
1、base 64を使用すると、画像の内容によってbase 64が異なりますが、この方法は私が言った穴にぶつかる可能性があります.
2,ネットワークピクチャであるため,各ピクチャアドレスはAPIインタフェースのようにパラメータ付きであってもよい.
ファイル名の後ろにパラメータが付いてくると、パラメータが何であれapiインタフェースが変わらずに画像の内容が得られます.また、パラメータが異なるため、最終的にImageコンポーネントに転送されるpropsも異なり、Imageコンポーネントをリフレッシュできます.