recyclerlistview
Version 4.2.1
このプロジェクトがあなたを助けたなら、星で私たちをサポートしてください？。
これは、複雑なレイアウトをサポートするReactネイティブおよびWebの高性能リストビューです。 JSは、AndroidのRecyclerviewとiOSのUICOLLECTIONVIEWの両方に触発されたネイティブの依存関係のないもののみです。
npm install --save recyclerlistview
最新のベータ：
npm install --save recyclerlistview@beta
注：ドキュメントはまもなくアップグレードされます。今のところ、コードコメントを確認し、機能の探索を確認します。このコンポーネントは、ReactネイティブWebでも積極的にテストされています。
RecyclerListViewは「セルリサイクル」を使用して、新しいビューオブジェクトを作成する代わりにアイテムをレンダリングするために表示されなくなったビューを再利用します。オブジェクトの作成は非常に高価であり、メモリオーバーヘッドが付属しているため、リストをスクロールするときにメモリフットプリントが上がり続けます。目に見えないアイテムをメモリからリリースすることは別のテクニックですが、さらに多くのオブジェクトと多くのゴミコレクションの作成につながります。リサイクルは、パフォーマンスやメモリ効率を損なうことのない無限のリストをレンダリングする最良の方法です。
すべてのパフォーマンスの利点とは別に、RecyclerListViewには箱から出して素晴らしい機能があります。
forceNonDeterministicRendering ）RecyclerListViewは、パフォーマンスを念頭に置いて構築されました。これは、クイックスクロールまたはフレームドロップの間にブランクがないことを意味します。 RecyclerListViewは、レンダリングする必要があるアイテムの決定論的な高さを確保することをお勧めします。これは、同じ高さともののすべてのアイテムが必要であることを意味するものではありません。必要なのは、リサイクルライストビューがドローが発生するのを待つのではなく、1つのパスでレイアウトを計算できるように、データを見て高さを前もって計算する方法です。さまざまな種類のアイテムを使用して、あらゆる種類のグリッドビューとリストビューを実行できます。これらはすべて最適な方法でリサイクルされています。タイプベースのリサイクルは非常に簡単で、箱から出てきます。
事前にアイテムの高さを決定できない場合に備えて、 forceNonDeterministicRenderingプロップをRecyclerListViewでTrueに設定します。これで、与えられた寸法を推定値として扱い、アイテムをサイズ変更させます。経験を向上させるために良い見積もりを提供してみてください。
Production Flipkart Grocery Demo Video（またはアプリを試す）： https：//youtu.be/6yqeqp3mmou
Infinite Loading/View Change（expo）： https：//snack.expo.io/@naqvitalha/rlv-demo
混合ビュータイプ： https：//snack.expo.io/b1gyad52b
extendedState、stableids and itemanimator（expo）： https：//snack.expo.io/@arunreddy10/19bb8e
サンプルプロジェクト： https：//github.com/naqvitalha/travelmate
Webサンプル（RNWを使用）： https：//codesandbox.io/s/k54j2zx977、https://jolly-engelbart-8ff0d0.netlify.com/
コンテキスト保存サンプル： https：//github.com/naqvitalha/RecyclerListView-context-prasevation-demo
その他のビデオ： https：//www.youtube.com/watch?v=tnv4hmmpgmc
| 小道具 | 必須 | パラメーションタイプ | 説明 |
|---|---|---|---|
| layoutprovider | はい | BASELAYOUTPROVIDER | 各要素のレイアウト（高さ /幅）を定義するコンストラクター関数 |
| DataProvider | はい | DataProvider | コンストラクター関数各要素のデータを定義します |
| ContextProvider | いいえ | ContextProvider | ビューのスクロール位置を維持するために使用されます。これは、バックナビゲーションで発生することがよくあります |
| ローレンダー | はい | （タイプ：文字列|番号、データ：any、index：number）=> jsx.element | jsx.element [] |ヌル | レンダリングされる反応成分を返す方法。コールバックでビューのタイプ、データ、インデックス、拡張ステートを取得します |
| initialoffset | いいえ | 番号 | レンダリングを開始したい最初のオフセット。これは、ページ全体でスクロールコンテキストを維持する場合に非常に便利です。 |
| renderaheadoffset | いいえ | 番号 | ビューをレンダリングするピクセルの数を事前に指定します。この値を増やすと、ブランクを減らすことができます（もしあれば）。ただし、これを可能な限り低く保つことが意図であるはずです。また、値が高いと再レンダー計算も増加します |
| ishorizontal | いいえ | ブール | 本当なら、リストは垂直ではなく水平方向に動作します |
| Aunscroll | いいえ | Rawevent：Scrollevent、offsetx：number、offsety：number）=> void | ユーザーとして実行されるスクロールコールバック関数について |
| オンレクリアート | いいえ | （Params：onrecreateparams）=> void | コンテキストプロバイダーからのリサイクルビューを再作成するときに実行されるコールバック関数 |
| externalscrollview | いいえ | {new（Props：ScrollViewDefaultProps）：BasesCrollView} | これを使用して、BasesCrollViewの実装を渡します |
| OnEndReached | いいえ | （）=> void | ビューの終了がヒットしたときに実行されたコールバック関数（定義されている場合はonEndthresholdをマイナス） |
| onEndReachedThreshold | いいえ | 番号 | 登録されたコールバックのために事前にピクセルの数を指定します |
| onEndReachedThresholdRelelative | いいえ | 番号 | リストの端から（リストの目に見える長さの単位）までの距離を指定して、コンテンツの終わりからでなければなりません。 |
| onvisibleIndicesChanged | いいえ | tonitemstatuschanged | 可視インデックスを提供します。印象イベントを送信するのに役立ちます |
| onvisibleIndexEsSchanged | いいえ | tonitemstatuschanged | （2.0ベータ版で非推奨）は、可視インデックスを提供します。印象イベントを送信するのに役立ちます |
| renderfooter | いいえ | （）=> jsx.element | jsx.element [] |ヌル | フッターをレンダリングする場合は、この方法を提供してください。増分荷重を実行している間、ローダーを表示するのに役立ちます |
| InitialRenderIndex | いいえ | 番号 | レンダリングを開始する最初のアイテムインデックスを指定します。両方が指定されている場合、初期オフセットよりも優先されます |
| スクロールスロットル | いいえ | 番号 | iOSのみ;スロットル期間をスクロールします |
| カンカング化 | いいえ | ブール | サイズが変更できるかどうかを指定します |
| FromWindowの距離 | いいえ | 番号 | （Depricated） windowShiftを使用してapplyWindowCorrection() APIを使用します。使用法？ |
| ApplyWindowCorrection | いいえ | （オフセット：番号、windowcorrection：windowcorrection）=> void | （拡張/ distanceFromWindow APIへの交換）に渡された補正値に基づいて、可視窓帯の更新が可能になります。ユーザーはWindowshiftを指定できます。 RecyclerListWindow全体がダウン/アップする必要がある場合は、 rectRectionを開始します。上部ウィンドウをシフトするためにトップウィンドウバウンドをシフトする必要がある場合、リサイクルリストビューの上端と重複するコンテンツ、エンドコレクション：同様のユースケースにボトムウィンドウを変更するために。使用法？ |
| usewindowscroll | いいえ | ブール | Webのみ;スクロール可能なdivの代わりにウィンドウのレイアウト要素 |
| 無効化 | いいえ | ブール | リサイクルをオフにします |
| ForcenondETERMINISTRENDERING | いいえ | ブール | デフォルトはfalseです。レイアウトプロバイダーで提供される寸法を有効にすると、厳密に施行されません。アイテムの寸法を正確に決定できない場合は、これを使用してください |
| ExtendedState | いいえ | 物体 | 場合によっては、行レベルで渡されたデータには、アイテムが依存するすべての情報が含まれていない場合があります。他のすべての情報を外に維持し、この小道具を介して渡すことができます。このオブジェクトを変更すると、すべてが再レンダリングされます。パフォーマンスを確保するために頻繁に変更しないようにしてください。再レンダーは重いです。 |
| ItemAnimator | いいえ | ItemAnimator | リサイクルラストビューのアイテムセルをアニメーション化する（シフト、追加、削除など） |
| スタイル | いいえ | 物体 | スタイルを内側のscrollviewに渡す |
| ScrollViewProps | いいえ | 物体 | 内側/外部ScrollViewにプロキシ化する必要があるすべての小道具について。それらをオブジェクトに入れれば、それらは広がり、渡されます。 |
| レイアウトサイズ | いいえ | 寸法 | ListViewのサイズを計算するために必要な最初の空のレンダリングを防ぎ、これらの寸法を使用して最初のレンダリング自体のリスト項目をレンダリングします。これは、サーバーサイドレンダリングなどのケースに役立ちます。レンダリング後にサイズを変更できる場合は、小道具のカンカング化をtrueに設定する必要があります。これはスクロールビューのサイズではなく、レイアウトのみに使用されることに注意してください。 |
| onitemlayout | いいえ | 番号 | RecyclerListViewのアイテム（インデックス）がレイアウトされたときに実行されるコールバック関数。これは、アイテムレンダリングの種類のコールバックのプロキシとしても使用できます。 |
| WindowCorrectionConfig | いいえ | 物体 | 指定するために使用されるのは、ウィンドウ補正構成と、一部のスクロールイベントに適用する必要があるかどうかです |
完全な機能セットについては、RecyclerListViewのプロップ定義（ファイルの下部）をご覧ください。 RefreshControlなどのすべてのScrollView機能も箱から出しています。
applyWindowCorrection 、RecyclerListViewの可視ウィンドウ境界を動的に変更するために使用されます。現在のスクロールオフセットとともに、RecyclerListViewのWindow -Correctionがユーザーにさらされます。 windowCorrectionオブジェクトは、3つの数値で構成されています。
windowShift distanceFromWindowの直接置換パラメーター。ウィンドウシフトは、リサイクルラストビュー全体がstickycontainer内で置換されるオフセット値です。このParamを使用して、最初のリストアイテムがウィンドウトップからどれだけ離れているかを指定します。この値は、StickyObjectsおよびRecyclerListViewのスクロールオフセットを修正します。startCorrection -StartCorrectionは、CoordinatorLayout Toolbarのような外部ファクターが場合でも、ユーザーが正しいSticky Headerインスタンスを受信できる上部可視ウィンドウバインドのシフトを指定するために使用されます。endCorrection -EndCorrectionは、ボトムアプリバーのような外部ファクターが可視ビューバウンドを変更しているときに、ユーザーが正しいスティッキーフッターインスタンスを受け取ることができる下部可視ウィンドウバウンドのシフトを指定するために使用されます。以下の例に示すように
TypeScriptは箱から出して動作します。唯一の実行は、継承されたScrollViewプロップです。 TypeScriptが継承されたScrollView Propsで動作するためには、ScrollViewProps Prop。
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/webからインポートを開始します。 import { RecyclerListView } from "recyclerlistview/web" 。インポートパスを保存する場合は、エイリアスを使用してください。プラットフォーム固有のコードのみがビルドの一部であるため、アプリには不要なコードは発送されません。requestAnimationFrame 、 ResizeObserver Apache v2.0
遭遇したバグの問題を開いてください。 Twitter @naqvitalhaで私に連絡するか、ご質問のご質問については、[email protected]に書き込みます。
