データの読み込み中にreact-nativeFlatListでisLoading要素をレンダリングするにはどうすればよいですか?

xiaolingxiao

私は、ニュースフィード書いていますFlatListバックエンドからデータをフェッチされloadData、完成した上にrenderItemユースケースと私のコードはどちらも標準です。完全なコードはここにあります:https//gist.github.com/pgbovine/8910348、ここでコメントセクションで私はユースケースを提供しました。

問題は、データのフェッチに時間がかかることです。データの読み込み中にプレースホルダーをレンダリングしたいと思います。現在OneFeed、アプリの読み込み時には表示されません。アプリが読み込まれると、外観に「ジャンプ」して、すべてが非常に不快になります。

これをどのように達成するかは不明です...OneFeed.rendreItem実際にレンダリングするタイミングを制御しないため...。

スンキベク
  return this.props.getData ? list : null;

ここでは、ActivityIndi​​catorを次のようにレンダリングしてみることができます。

  return this.props.getData ? list : <View><ActivityIndicator /></View>;

ActivitiyIndi​​catorが中央に表示されない場合は、含まれているビューにいくつかのスタイルを追加できます。


後で追加:

私が見ている一般的な方法の1つは、バックエンドからデータをフェッチしている間は読み込み状態をtrueに設定し、完了したらfalseに設定することです。ロード状態を参照して、ActivityIndi​​catorを表示できます。

また、アプリのUXを頻繁に改善するには、次のシナリオで何を表示するかを考える価値があります。

  • データをロードする前。
  • データの読み込み中。
  • データをロードした後-データは空です。
  • データをロードした後-データが多すぎます。
  • データのロード後-フェッチに失敗しました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ページの読み込み時にrmarkdown(.Rmd)ファイルを自動的にレンダリングするにはどうすればよいですか?

分類Dev

繰り返しReact要素をレンダリングするにはどうすればよいですか?

分類Dev

Laravelでレンダリング時間/ページ読み込み時間を表示するにはどうすればよいですか?

分類Dev

剣道グリッドの読み込み中に剣道読み込みアイコンを表示するにはどうすればよいですか?

分類Dev

Vueでコンポーネントの読み込みを停止してリダイレクトするにはどうすればよいですか?

分類Dev

特定のJSONデータをレンダリングするにはどうすればよいですか?

分類Dev

パンダを使用してデータの読み込みを高速化するにはどうすればよいですか?

分類Dev

ビュー要素がAngularでレンダリングされるタイミングを検出するにはどうすればよいですか?

分類Dev

ReactJS:新しい要素のレンダリングにもかかわらず、要素を現在の位置に固定するにはどうすればよいですか?

分類Dev

画面の中央にボタンをレンダリングするにはどうすればよいですか?

分類Dev

Reactコンポーネント内で削除された子DOM要素を再レンダリングするにはどうすればよいですか?

分類Dev

要素がVueJSで再レンダリングされたかどうかを確認するにはどうすればよいですか?

分類Dev

WordpressページでReactをレンダリングするにはどうすればよいですか?

分類Dev

ページの読み込み時にランダムな外部xmlデータセットを1つ返すにはどうすればよいですか?

分類Dev

ReactでAとBの再レンダリングを停止するにはどうすればよいですか?

分類Dev

HelmでのレンダリングからCustomResourceDefinitionを除外するにはどうすればよいですか?

分類Dev

Firefoxでフォントレンダリングを改善するにはどうすればよいですか?

分類Dev

Vuejsで画面を条件付きでレンダリングするにはどうすればよいですか?

分類Dev

特定の孫だけを埋め込みフォームでレンダリングするにはどうすればよいですか?

分類Dev

Reactで不要な再レンダリングを回避するにはどうすればよいですか?

分類Dev

Visual StudioCodeでGPUレンダリングを無効にするにはどうすればよいですか

分類Dev

JavaScript HTMLをPythonでHTMLにレンダリングするにはどうすればよいですか?

分類Dev

Djangoで画像を効率的にレンダリングするにはどうすればよいですか?

分類Dev

コンテンツの読み込み中にこのタイプのレイアウトを作成するにはどうすればよいですか?

分類Dev

ColumnChartスライダーをレンダリングするにはどうすればよいですか

分類Dev

別のReactコンポーネントでレンダリングされた要素にアクセスするにはどうすればよいですか?

分類Dev

Markojsで生のHTMLをレンダリングするにはどうすればよいですか?

分類Dev

iOS 7でADBannerViewのレンダリング幅を取得するにはどうすればよいですか?

分類Dev

JekyllでMarkdownの{%%}をレンダリングするにはどうすればよいですか?

Related 関連記事

  1. 1

    ページの読み込み時にrmarkdown(.Rmd)ファイルを自動的にレンダリングするにはどうすればよいですか?

  2. 2

    繰り返しReact要素をレンダリングするにはどうすればよいですか?

  3. 3

    Laravelでレンダリング時間/ページ読み込み時間を表示するにはどうすればよいですか?

  4. 4

    剣道グリッドの読み込み中に剣道読み込みアイコンを表示するにはどうすればよいですか?

  5. 5

    Vueでコンポーネントの読み込みを停止してリダイレクトするにはどうすればよいですか?

  6. 6

    特定のJSONデータをレンダリングするにはどうすればよいですか?

  7. 7

    パンダを使用してデータの読み込みを高速化するにはどうすればよいですか?

  8. 8

    ビュー要素がAngularでレンダリングされるタイミングを検出するにはどうすればよいですか?

  9. 9

    ReactJS:新しい要素のレンダリングにもかかわらず、要素を現在の位置に固定するにはどうすればよいですか?

  10. 10

    画面の中央にボタンをレンダリングするにはどうすればよいですか?

  11. 11

    Reactコンポーネント内で削除された子DOM要素を再レンダリングするにはどうすればよいですか?

  12. 12

    要素がVueJSで再レンダリングされたかどうかを確認するにはどうすればよいですか?

  13. 13

    WordpressページでReactをレンダリングするにはどうすればよいですか?

  14. 14

    ページの読み込み時にランダムな外部xmlデータセットを1つ返すにはどうすればよいですか?

  15. 15

    ReactでAとBの再レンダリングを停止するにはどうすればよいですか?

  16. 16

    HelmでのレンダリングからCustomResourceDefinitionを除外するにはどうすればよいですか?

  17. 17

    Firefoxでフォントレンダリングを改善するにはどうすればよいですか?

  18. 18

    Vuejsで画面を条件付きでレンダリングするにはどうすればよいですか?

  19. 19

    特定の孫だけを埋め込みフォームでレンダリングするにはどうすればよいですか?

  20. 20

    Reactで不要な再レンダリングを回避するにはどうすればよいですか?

  21. 21

    Visual StudioCodeでGPUレンダリングを無効にするにはどうすればよいですか

  22. 22

    JavaScript HTMLをPythonでHTMLにレンダリングするにはどうすればよいですか?

  23. 23

    Djangoで画像を効率的にレンダリングするにはどうすればよいですか?

  24. 24

    コンテンツの読み込み中にこのタイプのレイアウトを作成するにはどうすればよいですか?

  25. 25

    ColumnChartスライダーをレンダリングするにはどうすればよいですか

  26. 26

    別のReactコンポーネントでレンダリングされた要素にアクセスするにはどうすればよいですか?

  27. 27

    Markojsで生のHTMLをレンダリングするにはどうすればよいですか?

  28. 28

    iOS 7でADBannerViewのレンダリング幅を取得するにはどうすればよいですか?

  29. 29

    JekyllでMarkdownの{%%}をレンダリングするにはどうすればよいですか?

ホットタグ

アーカイブ