問題タブ [react-native-flatlist]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

2322 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
6488 参照

javascript - React ネイティブ SectionList レイアウト

異なるセクション ヘッダーで複数のセクションをレンダリングするために使用しています。思うように表示できなくて困っています。ヘッダーを上部とその下に、セクションの項目をグリッドとして配置したいと思います。

これは私が今持っているものです

このコードで：

そこで、sectionListContainer の css を sectionHeader に適用しないようにしたい。しかし、それが可能かどうかはわかりません。

誰かがそれについて何か考えを持っているなら、私に知らせてください!

ありがとう！

0 投票する
5 に答える
9880 参照

performance - ReactNative 0.43 で大きなリストの FlatList レンダリング パフォーマンスを向上させる方法は?

RN0.43 で FlatList を使用して 3 列に ~250 個の画像のリストをレンダリングしようとしています。FlatList の onLayout 関数で画像の幅を画面の幅に合わせて変更します。

初期のパフォーマンスは問題ありませんが、上下にスクロールした後、画像が表示されるまでに 1 ～ 2 秒かかることがあります。

画面の向きを変更するとさらに悪いことに、画面が更新されるまでに 2 ～ 3 秒かかります。

いくつかの調査結果:

  1. 画面の回転後、FlatList.onLayout が呼び出されるまでに 1 ～ 2 秒かかります

  2. FlatList.onLayout と画像幅の更新の後、各画像 (リストの約半分、最大 150 個の画像。表示されるのは最大 15 個のみ) は 2 ~ 4 回レンダリングされますが、render() は 1 回だけ呼び出されます。

質問：

  1. コードを変更してパフォーマンスを改善するにはどうすればよいですか?
  2. 複数列リストの getItemLayout() では、オフセットは (itemHeight + separatorHeight) * (index%numColumns) のようにする必要がありますか?

ありがとう。

テスト対象: GalaxySII (4.1.2) および Android SDK エミュレーター (7.1.1)

0 投票する
2 に答える
18534 参照

react-native - FlatList numColumns が正しく機能していないように見えますか?

FlatList を使用して、多数のユーザー アバターをグリッド形式で誰かに表示しようとしていますが、非常に奇妙に見えてしまい、修正方法がわかりません。

これがどのように見えるかです

私の FlatList コードは次のようになります。

renderItem のコンポーネントは次のようになります。

誰にもアイデアはありますか？


12345678910