recyclerlistview下載 - recyclerlistview源代碼下載

recyclerlistview

網站數據

Version 4.2.1

下載

RecyclerListView

如果這個項目幫助您，請用星星為我們提供支持？

這是React Native和Web的高性能ListView，並支持複雜的佈局。 JS僅沒有本機依賴性，靈感來自於iOS上的Android和UicollectionView的回收範圍。

npm install --save recyclerlistview

有關最新Beta：
npm install --save recyclerlistview@beta

概述和功能
為什麼？
演示
道具
打字稿
嚮導
執照
聯繫我們

注意：文檔將很快升級，現在檢查代碼註釋以獲得清晰和探索功能。該組件也可以通過React Native Web進行積極測試。

概述和功能

RecyclerListView使用“單元回收”來重用視圖，這些視圖不再可見，而不是創建新的視圖對象。對象的創建非常昂貴，並帶有內存開銷，這意味著當您滾動列表時，內存足跡不斷上升。釋放不可見的物品是另一種技術，但這導致創建更多的對象和大量垃圾收集。回收是渲染無限列表的最佳方法，不會損害性能或內存效率。

除了所有性能優勢外，RecyclerListView都具有很棒的功能：

跨平台，在網上工作
支持交錯的網格佈局
即使無法預先確定尺寸（prop forceNonDeterministicRendering ），也支持可變高度項目
即時佈局切換，例如從GridView到ListView，反之亦然
結束探測
水平模式
可見性事件
初始渲染偏移/索引支持
頁腳支持
對容器尺寸更改的回流支持，並具有第一個可見的物品保存
滾動位置保存
窗口滾動支持網絡
（新）添加了itemAnimator接口，自定義您的意志RLV處理佈局更改的方式。允許您修改移動單元格的動畫。當一個單元格的高度發生變化時，您可以做一些事情，例如順利將項目移至新位置。
（新）穩定的ID支持，將穩定ID與項目相關聯的能力。將在DataProvider更新時啟用美麗的添加/刪除動畫並優化重新渲染器。
（新）粘在頂部或底部的粘性回收項目。

為什麼？

RecyclerListView的構建是考慮到性能的，這意味著在快速滾動或框架下降時沒有空白。 RecyclerListView鼓勵您對需要渲染的物品具有確定的高度。這並不意味著您需要擁有所有相同高度和東西的項目，而是您所需要的只是一種查看數據並預先計算高度的方法，以便RecyclerListView可以在一個通行證中計算佈局，而不是等待抽籤發生。您仍然可以使用各種類型的項目進行各種瀏覽圖和列表視圖，這些項目都以最佳方式回收。基於類型的回收非常容易做到，並且開箱即用。

如果您無法事先確定項目的高度，只是將RecyclerListView上的forceNonDeterministicRendering Prop設置為true。現在，它將將給定的尺寸視為估計，並讓項目調整大小。嘗試給出良好的估計以改善經驗。

演示

生產Flipkart雜貨演示視頻（或嘗試應用程序）： https：//youtu.be/6yqeqeqp3mmou
無限加載/查看更改（EXPO）： https：//snack.expo.io/@naqvitalha/rlv-demo
混合觀看類型： https：//snack.expo.io/b1gyad52b
ExtendedState，StableIDS和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-preservation-demo

其他視頻： https：//www.youtube.com/watch?v=tnv4hmmpgmc

道具

支柱	必需的	參數類型	描述
LayoutProvider	是的	BaselayoutProvider	定義每個元素的佈局（高度 /寬度）的構造函數函數
DataProvider	是的	DataProvider	構造函數函數定義每個元素的數據
Context -Provider	不	Context -Provider	在視圖被破壞的情況下，用於保持捲軸位置
Rowrenderer	是的	（類型：字符串\|編號，數據：Any，index：number）=> JSX.Element \| jsx.element [] \|無效的	返回渲染反應組件的方法。您可以在回調中獲得視圖的類型，數據，索引和擴展狀態
初始Offset	不	數字	您想開始渲染的初始偏移；如果您想在頁面上保持滾動上下文，這將非常有用。
RenderaheadOffset	不	數字	提前指定您希望呈現視圖的預先像素。增加此值可以幫助減少空白（如果有）。但是，應盡可能低的意圖。更高的值還增加了重新渲染的計算
iShorizontal	不	布爾	如果為true，列表將水平運行，而不是垂直運行
滾動	不	RAWEVENT：SCROLLEVENT，OFFSETX：數字，offsety：number）=> void	在滾動回調函數上，該函數是用戶滾動執行的
搶劫	不	（參數：onRecReateParams）=> void	從上下文提供商重新創建回收器視圖時執行的回調函數
外部克羅洛維尤	不	{new（props：scrollviewDefaultProps）：baseScrollView}	用它來傳遞baseScrollview的實現
Onendreached	不	（）=> void	命中視圖末尾時執行回調函數（如果定義，則減去OnEndThreshold）
orendreachedthreshold	不	數字	提前指定了多少像素的ordendreach回調
orendreachedThresholdrelative	不	數字	指定距離末端的距離（以列表的可見長度為單位）列表的底部邊緣必須從內容的末端觸發ordendreach的回調
OnvisibleIndiceschanged	不	TonitemStatuschanged	提供可見索引；有助於發送印象事件
OnvisibleIndexesseshanged	不	TonitemStatuschanged	（在2.0 beta中棄用）提供可見索引；有助於發送印象事件
Renderfooter	不	（）=> JSX.Element \| jsx.element [] \|無效的	如果您想渲染頁腳，請提供此方法。在進行增量負載時有助於顯示加載程序
InitialRenderIndex	不	數字	指定要啟動的初始項目索引。如果兩者都指定
滾動刺	不	數字	僅iOS；滾動節氣門持續時間
canchangize	不	布爾	指定大小是否可以更改
距離窗口	不	數字	（倒入）使用`applyWindowCorrection()` API與`windowShift` 。用法？
應用WindowCorrection	不	（偏移：數字，窗口校正：窗口校正）=> void	（增強/替換為`distanceFromWindow` API的距離）允許根據傳遞的校正值更新可見的窗口。用戶可以指定WindowShift ；如果整個RecyclerListWindow都需要向下/向上移動，請開始校正；如果需要移動頂部窗口以使top窗口被綁定到下移動是一個與recyclerlistview的頂部邊緣重疊的內容，則端校正：更改底部窗口綁定的類似用例。用法？
使用WindowsCroll	不	布爾	僅網絡；窗口中的佈局元素，而不是可滾動的div
殘疾伴侶	不	布爾	關閉回收
forcenonderministicrendering	不	布爾	默認為false;如果在佈局提供商中提供的維度，則不會嚴格執行。如果無法準確確定項目尺寸，請使用此
擴展州	不	目的	在某些情況下，行傳遞的數據可能不包含該項目所依賴的所有信息，您可以將所有其他信息保留在外部並通過此道具傳遞。更改此對象將導致所有內容重新渲染。確保您不會經常更改它以確保性能。重新租戶很重。
itemanimator	不	itemanimator	啟用動畫循環列表項目單元格（移動，添加，刪除等）
風格	不	目的	將樣式傳遞到內部捲軸
ScrollViewProps	不	目的	對於所有需要代理內部/外部捲軸的道具。將它們放在一個物體中，它們將被散佈並傳遞。
佈局	不	方面	將防止最初所需的空渲染來計算ListView的大小，並使用這些尺寸在第一個渲染中渲染列表項目。這對於諸如服務器端渲染等案例很有用。如果在渲染後可以更改尺寸，則必須設置為canchangize。請注意，這不是滾動視圖大小，僅用於佈局。
OnItemlayout	不	數字	當recyclerListView（在索引上）的項目已佈局時執行的回調函數。這也可以用作項目求的替代回調。
WindowCorrectionConfig	不	目的	用於指定的是窗口校正配置以及是否應將其應用於某些滾動事件

有關完整功能集，請查看RecyclerListView（文件底部）的Prop定義。所有ScrollView功能都可以RefreshControl即用。

應用WindowCorrection用法

applyWindowCorrection用於動態更改回收列表的可見窗口邊界。 RecyclerListView以及當前滾動偏移量的窗口校正暴露於用戶。 windowCorrection對象由3個數字值組成：

windowShift - 直接更換distanceFromWindow參數。窗口移位是偏移值整體在粘性範圍內移位，使用此參數指定第一個列表項目遠離窗口頂部的距離。此值糾正了簽名偏移量的粘合物和循環列表。
startCorrection使用啟動校正用於指定頂部可見窗口綁定的移位，即使在諸如CoordinatorLayout工具欄之類的外部因素時，用戶也可以接收正確的粘性標頭實例。
endCorrection - 使用端校正來指定底部可見窗口綁定的變化，當諸如底部應用程序欄之類的外部因素更改可見視圖綁定時，用戶可以接收正確的粘性頁腳實例。

如下示例所示

Alt文字

打字稿

打字稿開箱即用。唯一的執行是使用繼承的scollview道具。為了使Typescript與繼承的ScrollView Prop一起工作，您必須將所述繼承的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 } ) ;
        } }
      />
    )
  } }
/>

嚮導

示例代碼
表現
粘性指南
網絡支持：與React Native Web合作開箱即用。用於與ReactJ一起使用，從recyclerlistview/web Eg導入，例如， import { RecyclerListView } from "recyclerlistview/web" 。如果要保留導入路徑，請使用別名。只有平台特定的代碼才是構建的一部分，因此，不會使用您的應用程序發貨。
需要： requestAnimationFrame ， ResizeObserver