React-native-snap-carousel: FlatListを別のコンポーネントに置き換えますか？

2つの大きな欠点：

• 最初のものはScrollView拡張します。
• 2つ目はネイティブプラグインですが、カルーセルを大幅に改善するFlatListの不足している機能（スクロール期間、スクロールコールバック...）を実装していません。

率直に言って、 FlatList使用できません。 react-native-snap-carousel （ところで私は大好きです）の回避策は、 initialNumToRenderをdata.lengthです。 これがバグのないバージョンを入手する唯一の方法です。
これは私のインストール後のスクリプトからの抜粋です：

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

さて、 react-native-snap-carouselが、外部からinitialNumToRenderを設定できる機能をサポートしていれば、 Carousel.jsにパッチを適用する必要がなくなります。
また、予想されるアイテム数が100未満（おそらくすべてのユースケースの90％）の場合、 Carousel.jsはデフォルトでinitialNumToRenderをdata.lengthに設定することもできます。

上記で見つけた2つのライブラリのうち、 react-native-largelist非常に興味深いものです。 不足している機能を回避することは可能でしょうか、それとも作者にそれらを追加するように説得することは可能でしょうか？

ねえ@PublicParadise 、

ええと、 initialNumToRenderはオーバーライド可能な小道具の一部<Carousel initialNumToRender={data.length} />を使用できるはずです;-)私はそれを試したので、それが機能することを保証できます＃235。

しかし、それを行う必要があり、したがって、 FlatListに付属するは、 useScrollViewをtrue設定することをお勧めします。 FlatListを完全にバイパスするために、この小道具を導入しました。 さらに、このような素晴らしい機能を導入することができます：p

私が検討している2つのプラグインに関しては、最初に多くのテストを実行する必要があります。 react-native-largelistに、不足しているが必要な機能を実装するように説得できれば、間違いなく役立ちます。

作者がそうするのをやめるとそれを維持することができないので、今のところ私は自分のプラグインをネイティブのプラグインに基づいていることに自信がないことに注意してください（JSのものを引き継ぐのに問題はありません）。

こんにちは@ bd-arc、

ヒントをありがとう。 正直なところ、 FlatList不満を感じたので、ハックを配置して、コンポーネントに二度と触れませんでした。 当時、 initialNumToRenderはオーバーライド可能な小道具ではなく、 useScrollViewはさらに優れているようです。

FlatListはAnimated奇妙な依存関係を持っているようです。 それはおそらくほとんどの人が問題を抱えているところです。 ちょうど6日前に誰かがそれについて

私自身もFlatList交換を検討していて、調査を行いました。 リストのウィンドウ処理と表示内容のレンダリングは、難しい問題とは見なされていないようです。 私はRxJS / most.jsソリューションが一番好きでした。

これら2つのソリューションのいずれかを代替として実装する運はありましたか？

いいえ、私は調査をしただけです。 当時、私はまだ彼らが最終的にFlatList修正することを望んでいました。
私の研究からのいくつかのリンクを共有させてください：

• RxJSObservablesを使用したリアクティブプログラミングでのナイーブな無限スクロール
• ReactでRxJSを使用する
• 高性能ReactNativeリストビューのための行のリサイクル
• React NativeListView実験
• Cycle.jsを使用してテーブルをスクロールする
• Bacon.jsで無限スクロールリストを作成する
• infinite-baconからrxjsへの大まかな翻訳

しかし、ネイティブプラグイン（ react-native-largelist ）が正しい方法だと感じています。

あなたの研究を共有してくれてありがとう👍

正直なところ、今はこれらすべてを試してみる時間がありません。 react-native-largelistに飛び込みたいと思ったら、それは非常に役立ちます。 そうでない場合は、お互いに投稿しておくようにしましょう;-)

アップデート：私はこれらのリンクを掘り起こしたとして、私はその実現タルコルからwix.com本当に良いミディアムのブログを持っています。 これまでのところ、私は彼のすべての記事が好きです。 これは私たちの議論にも関連しているかもしれません：

• React Native ListViewのパフォーマンスの再検討—ブリッジなしでのリサイクル
• BindingListView-ダイレクトビューバインディングをサポートするReactNativeListView実験的実装

@ bd-arcここでも同じですが、私にはかなり厳しい日課があり、時間とリソースが限られています。
BindingListView見るかもしれません。 しかし、はい：お互いをループに入れましょう:)

はい、Tal Kolは、ReactNativeとパフォーマンスの最適化に関する最高品質の記事をいくつか書いています。

また、私はWixのプラグインreact-native-interactableに特に興味を持っていましたが、残念ながら最近、いくつかの厄介な問題に取り組む時間がありませんでした。

@ bd-arc recyclerlistviewがScrollView拡張することの問題は何ですか？ large-listとFlatListどちらも同じものに基づいています。
私はrecyclerlistviewを作成し、最近私のチームはこのカルーセルコンポーネントを使用しました。 FlatListをrecyclerlistviewと交換したところ、うまく機能しました。

ねえ@naqvitalha 、輝いてくれてありがとう！

私の経験から、そして今まで、 ScrollView基づいて構築されたものはすべて、処理するアイテムや機能の制限が膨大な数になると、最終的にパフォーマンスの制限を示します。 しかし、私の目標は間違っていることが証明されることですのでご安心ください;-)

広く徹底的にテストできるように、この進化のPRを提出することに興味がありますか？

@ bd-arcもちろんです。 それをさせてください。

@naqvitalha @ bd-arc flatlistをrecyclerlistviewに置き換えるPRでステータスが更新されますか？ 使いたいです

ScrollView FlatListとrecyclerlistviewとは関係ありませんが、 react-native-gesture-handlerがこのlibをどのように改善できるかを調べた人はいますか？

ドキュメントから：

このライブラリを使用すると、ジェスチャはJSレスポンダーシステムによって制御されなくなりますが、代わりにUIスレッドで認識および追跡されます。 タッチ操作とジェスチャ追跡がスムーズになるだけでなく、信頼性が高く、決定論的になります。

react-native linkが必要ですが、このlib依存関係を解放しておくという点では残念です。 しかし、現在はExpo / CRNAに含まれています。

ねえ@ pcooney10 、

私は以前、 ScrollView / FlatList上にカスタムPanResponderを実装することを検討しました（＃40でわかるように）。

react-native-gesture-handler似たようなことを試しましたか？ これが正当なアイデアなのか、狂気へのまっすぐな方法なのかを判断するために、フィードバックをもらいたいです...

@amitassarafこのコンポーネントのコントラクトは、小道具が渡されるため、FlatListと非常によく似ています。 RLVの場合、レイアウトプロバイダーは必須です。 これは重大な変更になるか、新しいモードを導入する必要があります。

みなさん、こんにちは。このコンポーネントを使用した私の経験を少し共有したいと思います。 ScrollView内で使用する必要があり、プロパティremoveClippedSubviewsを指定するよりも多くのアイテムが表示されるという問題が発生しました。それ以外の場合は、各パスがメモリから削除されません。アプリがAndroidのRAMメモリを消費する原因となる新しい要素を作成しましたScrollView （または別のリスト）内のリストの正しい操作を取得するには、次のFlatListプロパティを使用します。

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

ケースに応じて、ニーズに最適な値を構成できます。 このようにして、メモリリークがほとんどなく、期待されるパフォーマンスが得られ

@ machester4調査結果を共有していただき、ありがとうございます。 これらの値はすべてのユースケースに適合するわけではありませんが、アプローチは適切です;-)

そのロジックを、垂直リスト内にある水平リストに適用できます。 私の場合、すべての水平リストには一度に3つの要素が表示されます。 そのため、値はmaxToRenderPerBatch 、 initialNumToRenderは4であり、ユーザーにとってより良いエクスペリエンスが得られます。

@naqvitalhaカルーセル内でFlatListをRecylerViewに置き換えた方法を教えてください。 また、RecyclerViewでhttps://github.com/facebook/react-native/issues/20500のようなものをサポートしていますか？

@ bd-arc注意してください、これはreact-native-snap-carouselクライアントに影響を与えると確信しています。
https://github.com/facebook/react-native/issues/21070

@PublicParadiseのヘッドアップをありがとう！

FlatListは驚かされることはありません... InteractionManagerがどこかで実行されているように見えるため、コンポーネントロジックの実行が延期されます。

それは間違いなくFlatListを永久に取り除く時です:-)

こんにちは、これまでのところ、このフィールドに関する更新はありますか？

実際、私の意見では、 FlatListには、本当に優れたリストコンポーネントになるために必要なものがあります。
欠けているのは、iOSでUITableViewが持っている「推定行の高さ」の概念だけです。
したがって、「ハッカーやトリックを行うために非同期でレイアウトする必要がある行数」のプロパティは必要ありません。

必要なのは、私が言ったように、 estimatedRowHeight （行ごとに異なる見積もりを許可するためのコールバックを使用することもできますが、それでも見積もりです！）。

• これは、スクロールビューのコンテンツサイズを計算するために使用されます。
• オフセットまでスクロールすると、オフセットまで直接スクロールします。
• 行をレンダリングするときはいつでも-レイアウト後にサイズをキャッシュします。
• キャッシュされたサイズ+推定行の高さを使用して、アイテムへのオフセット、またはオフセットのアイテムをすばやく計算します。
• また、非常に高いアイテムインデックスの前にすべての行の見積もり/キャッシュを考慮することはできません。ある種のウィンドウサイズを使用し、残りの平均見積もりを使用します。

したがって、コンテンツサイズは動的に変化しますが、最後のアイテムやその他のインデックスにスクロールでき、グリッチなしでそこに到達できるため、誰も気にせず、感じません。スクロール中に不足しているアイテム。

こんにちは@naqvitalha 、このコンポーネントのフラットリストをRLVに移行しようとしているブランチまたはPRはありますか？ それは私にとって非常に役に立ちます。 ありがとう。

私のコンポーネントを試していただきありがとうございます。

ほとんどすべてのシーンで、次のようにする必要があります。

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

また、カルーセルのすべての親に{ flex：1 }スタイルが含まれていることを確認してください。

このヒントに注意してください：

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

アイテムがLargeListのサイズを支えたい場合、LargeListはうまく機能しません。 LargeListサイズがその親または制限された高さから継承されていることを確認する必要があります。

あなたが中国語を理解しているなら、私のプールの英語を許してください。 この問題をチェックしてください

FlatListコンポーネントは、バグが多すぎます。

これらのプラグインは、興味深い代替品となる可能性があります。

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

よく言った