react native big list
Release 1.6.1
ドキュメント
これは、同様のフラットリスト使用量を使用して複雑なレイアウトをサポートして、交換を容易にするための複雑なレイアウトをサポートする、Reactネイティブの高性能リストビューです。 React Native Worksでのビッグリストレンダリングのこのリストの実装は、パフォーマンスとメモリの使用に焦点を当てたリサイクルを使用して、リストの数千のアイテムを処理することができます。
公開されているWebアプリでも試すことができます：Demo
React Nativeのフラットリストは素晴らしいですが、大きなリストに関しては、アイテムのキャッシングのためにいくつかの欠陥があります。 react-native-largelistやrecyclerlistviewなどのいくつかの代替案が存在しますが、どちらにもいくつかの問題があります。
react-native-largelist 、WebおよびExpoと互換性がなく、ネイティブコードを再調整して維持する必要がある場合があり、奇妙なリストアイテムのリサイクル（空白のアイテムがないため）があり、データの再構築が必要であり、多くのデータを処理しようとする際にいくつかの問題があります（例：100,000アイテム）。
recyclerlistviewはパフォーマンスがありますが、マウントの空のフレーム、マウントの要素にスクロールしようとするときの奇妙なスクロール位置に苦しみ、スティッキーヘッダーの実装はAnimatedと競合します。
Recyclerを使用すると、大規模なデータセットを簡単に表示できます。データを提供し、各アイテムの外観を定義し、リサイクルライブラリが必要なときに要素を動的に作成します。名前が示すように、リサイクル業者はこれらの個々の要素をリサイクルします。アイテムが画面からスクロールするとき、リサイクル業者はそのビューを破壊しません。代わりに、リサイクラーは画面上でスクロールした新しいアイテムのビューを再利用します。これにより、パフォーマンスが大幅に向上し、アプリの応答性が向上し、消費電力が削減されます。
リストがアイテムを十分に速くレンダリングできない場合、レンダリングされていないコンポーネントは空白として表示されます。
このライブラリは完全にJSネイティブであるため、 Android、iOS、Windows、MacOS、Web、Expoのすべての利用可能なプラットフォームと互換性があります。
次のコマンドラインのいずれかを実行するだけで、NPMまたはYARNからライブラリをインストールします。
| npm | 糸 |
|---|---|
npm install react-native-big-list --save | yarn add react-native-big-list |
フラットリストから移行する方法も読んでください
基本例：
import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ;その他の例については、ディレクトリのexampleを確認するか、 listディレクトリを確認するか、ドキュメントを確認してください
| BigList vsフラットリスト | セクションリスト |
|---|---|
 |  |
クローンまたはダウンロードリポジトリと後：
cd Example
yarn install # or npm install
expo startデバイスでエキスポクライアントを開きます。それを使用して、 expo startによって印刷されたQRコードをスキャンします。プロジェクトが初めてバンドルしてロードされている間、1分待たなければならない場合があります。
公開されているWebアプリでも試すことができます：Demo
このリストには、特定の小道具と方法に加えて、Scrollviewと同じ小道具があります。
アイデアがありますか？バグを見つけましたか？問題に応じて、リクエストを引き出してください。貢献は大歓迎で、大歓迎です！少しでも役立ち、クレジットは常に与えられます。
