React Native で画像を思い通りに動作させるのに苦労しています。
RN 内の画像は別のスレッドでネイティブにデコードされるため、React Native は、準備ができたときにコンポーネント全体を一度に示すのではなく、各画像が読み込まれた後、コンポーネントで使用される画像 (背景画像、ハンドル、ノブ、スライダー) を異なるタイミングで表示します。
画像をレンダリングするには require メソッドを使用します。
<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />
この非同期読み込みは、読み込みがほぼ即時であれば許容されます。しかし、小さな画像でも読み込みが遅いようです。これにより、特定のコンポーネントのすべての画像が読み込まれるまで、UI が非常にプロフェッショナルでない感じになります。
画像の読み込みを高速化する方法はありますか? UIImageView をラップすると速くなりますか (XCode iOS プロジェクトでの画像の表示は瞬時に行われるようです)。XCode で手動でバンドルされた画像への 'uri' 参照は高速化できますか? React Native が通常の iOS アプリよりも画像のレンダリングに非常に時間がかかるのは、私にはまったく理解できません。さらに、コンポーネントの動的インスタンスを複数作成すると、新しいコンポーネントが作成されるたびに、画像を再度読み込む必要があるようです。
画像の読み込み状態を手動で追跡する
もちろん、各画像の読み込みイベントを手動で追跡し、コンポーネントのコンテナ ビューの不透明度を 0 から開始して、画像が読み込まれたときに 1 までアニメーション化することもできます。しかし、これはこのような場合には複雑すぎるようです。
ベストアンサー1
イメージは、本番環境用と開発環境用にビルドする場合、異なる方法でロードされます。開発中は、イメージはパッケージ サーバーから HTTP 経由で提供されますが、本番環境ではアプリにバンドルされます。デバイスで本番環境ビルドを実行して、実際に問題なのか、開発モードの副作用なのかを確認してください。