web-dev-qa-db-ja.com

ReactのFlatListに相当React

React Reactのネイティブ）の FlatList コンポーネントに相当するものはありますか？React Native、I ' mは、これをReactに変換します。（ react-native-web の使用を検討してきましたが、主にReactを学びたいという理由で、これに反対しました。）

同等のものがない場合、私は map（） を使用して、私が構築するItemコンポーネントを介してすべてのアイテムをレンダリングすることを考えていました。これも here で示されていますドキュメントとこの SO質問 。

javascriptreactjsreact-nativereact-native-flatlist
4
avriis

この種のものを実行するための反応ネイティブのような特定のコンポーネントはありません。そのため、通常はmap()を使用してこの種のものを実現します。

ただし、再利用可能な場合は、同じリストに対して毎回map()関数を記述しないように、確実にListコンポーネントを自分で作成できます。

このようなもの：

function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}
5
Andrei Olar

flatlist-react（npm install flatlist-react）と呼ばれるreactコンポーネントがあり、次のようなリストのレンダリングに使用できます。

<FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>

また、並べ替え、グループ化、フィルタリング、レイアウトスタイリングなども処理します。

事業：

https://github.com/ECorreia45/flatlist-react

2
ecorreia

React-Nativeは、JavaScript経由でネイティブのAndriodおよびiOSコンポーネントを公開することで機能します。

AndroidとiOSにはそれぞれListViewsがあり、FlatListを使用するときに内部的に呼び出されます。

HTMLには、iOSおよびAndroidのListViewsに相当するリストコンポーネントがありません。
https://github.com/Flipkart/recyclerlistview のようにこれを行うライブラリを使用するか、Array.mapは、レンダリングしたいdivsを返し、同等のスクロールロジックを自分で実装します。

1
Jeff P Chacko

このプロジェクトにはフラットリスト/リストビューの多くの機能が含まれていますが、これは承認されているようです。ReactネイティブおよびWeb用です。この記事を読むことができます。

https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

いくつかの興味深い点：

フラットリスト：

FlatListは驚くべきものであり、数多くの機能が付属しています。セパレーターをレンダリングすることもでき、組み込みのカスタマイズ可能なビュートラッカーが付属しています。

FlatListは仮想化されたリストビューであり、ビューポートから外れたビューをマウント解除することで実現します。全体的なメモリ使用量を減らすのに役立ちますが、このアプローチには欠点があります。

ネイティブエンドのビューが破壊され、大量のガベージコレクションが発生します。上にスクロールするときにビューを再作成する必要がありますが、スクロールが速い場合は問題になる可能性があります。

事業：

https://github.com/Flipkart/recyclerlistview

0
JRK