web-dev-qa-db-ja.com

ReactNative FlatListはすべてのアイテムを一度にレンダリングしますか？

ReactNativeの新しいListコンポーネントであるFlatListを使用しています。

セルが実際に画面に表示されていなくても、FlatListはすべてのアイテムを一度にレンダリングするようです。

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

30アイテムを設定すると、「レンダリングされた」警告がアイテムの総数に従って呼び出されたようです。

FlatListは、AndroidのRecycleViewが機能する方法に似ています。画面に表示されようとしているときにのみアイテムをレンダリングします。

何か不足していますか？パフォーマンスが低下しませんか？
アイテムが表示されようとしているときにのみレンダリングできることを望みました。

react-nativereact-native-flatlist
11
Rom Shiri

いずれかのアプリで同じ問題が発生しました。この問題を解決するには数時間かかりました。

⇓⇓⇓

TDLR;FlatListをScrollList（または他の種類のリスト）にネストしないことを確認してください。

⇑⇑⇑

詳細な説明：

[〜＃〜] issue [〜＃〜]

Thread-Openerと同じように、最初、FlatlistはinitialNumToRenderで定義した量のレンダーのみをレンダーしますが、その直後に、アプリはリストの残りすべてのレンダーを開始します。

環境

私はnative-base.ioをUI-Libraryとして使用し、画面のコンテンツをコンポーネントでカプセル化しました

ソリューション

そのネイティブベースのコンポーネント<Content> ScrollListを置き換えます。 ScrollList内のFlatListは、奇妙な結果にパイプします。指定されたScreenの-Componentを<View>、すべてが期待どおりに機能します。

5
suther

FlatListは、事前にレンダリングするアイテムが多すぎるため、フィル率を向上させることができません。同様の問題があります。そのような問題を回避するためにRecyclerListViewを構築します。 RecyclerViewとよく似ていますが、JSのみです。 FlatListより高速で、Flipkartでの戦闘テストが行​​われています。あなたはそれを試すことができます。

リンク： https://github.com/Flipkart/ReactEssentials

詳細については、こちらをご覧ください： https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

0
naqvitalha

それは同じです。ドキュメントには、次のものがあります。

メモリを制限し、スムーズなスクロールを可能にするために、コンテンツは非同期でオフスクリーンにレンダリングされます。これは、フィルレートよりも速くスクロールして、一時的に空白のコンテンツが表示される可能性があることを意味します。これは、各アプリケーションのニーズに合わせて調整できるトレードオフであり、バックグラウンドでの改善に取り組んでいます。

したがって、すべてのアイテムを一度にレンダリングするわけではありません。

それに：

これはPureComponentであり、プロップが浅いままの場合は再レンダリングされません。 renderItem関数が依存するすべてのものが、更新後に===ではないプロップ（extraDataなど）として渡されることを確認してください。そうしないと、変更時にUIが更新されない場合があります。これには、データプロパティと親コンポーネントの状態が含まれます。

詳細が必要な場合はお知らせください。

0
EnriqueDev