web-dev-qa-db-ja.com

Reactネイティブ：画像のロード後のアプリのパフォーマンスが悪い

画像の読み込みに問題はないようですが、既に読み込まれた後に問題があります。

私のアプリでは、ゲーム全体でカード画像を1つずつ読み込みます。 40枚のカード画像をロードするようになると、アプリ全体が遅くなります。これは常に40番目のイメージで発生し、40番目以降のカードイメージのロードを続けると、イメージをロードするたびに遅くなります。

実用的な詳細：

  1. expoでネイティブに反応する
  2. Locals from Localフォルダーを配列に要求し、その配列をインポートします。
  3. 15KB-120KBの単一の画像サイズ、すべての画像を一緒に：.1MB
  4. 画像の表示に使用されるコンポーネント：Image（Reactネイティブシンプル画像コンポーネント）
  5. Array.mapを使用してすべての画像を表示する

合計300KBの醜い画像ですべての画像を切り替える-アプリは問題なく高速に実行されます

インポートされた必要な配列：

const CardsUris = [
  {uri:require('../assets/AC.png'), key:'AC'},
  {uri:require('../assets/AD.png'), key:'AD'},
  {uri:require('../assets/AH.png'), key:'AH'},
  {uri:require('../assets/AS.png'), key:'AS'}...
]

コンポーネントツリー構造：

- Base
    - Container
        - <Image source={CardsUris[index].uri} />

この問題をトラブルシューティングする方法はありますか？画像を読み込んだ後に現れるそのような問題については何も見つかりませんでした。

reactjsimageperformancereact-nativeexpo
4
Ravid

あなたの痛みが分かります。

パフォーマンスを向上させるために試すことができることの1つは、 イメージアセットをバイナリにバンドルする です。 Expoでこれを行うには、app.jsonのassetBundlePatternsキーを使用して、プロジェクトディレクトリ内のパスのリストを提供します。

"assetBundlePatterns": [
  "assets/images/*"
],

別のアプローチは、デフォルトのものよりも画像をレンダリングする代替パッケージを使用することです。 React NativeのImageコンポーネントは、ほとんどの場合、ブラウザのようなイメージキャッシングを処理します。多くの場合、あなたのようなユースケースでは、ちらつき、キャッシュからの低パフォーマンスのロード、および一般的なパフォーマンス。

だからあなたが試すことができるのは FastImage -これらの問題を解決するImageの代わりです。フードの下では、FastImageは SDWebImage（iOS） と Glide（Android） のラッパーなので、それが秘密のソースです。

画像を<FlatList />でレンダリングしますか？もしそうなら、私は react-native-optimized-flatlist も試してみます。これは、React Nativeの<FlatList />コンポーネントの最適化バージョンで、ビューポート内にないすべてのアイテムを削除します。

他に何も役に立たない場合は、グリッドビューで画像がすべて40になっているときに、画像のサムネイルの品質を下げます。

1
Kaloyan Kosev

同じ問題がありました。 FastImageをプリロードで使用してみることができます。
https://github.com/DylanVann/react-native-fast-image#fastimagepreload-source--void

0
CR7