react native big list

如果這個項目為您提供了幫助，請為我們提供恆星嗎？

文件

描述

這是什麼？

這是React Native的高性能列表視圖，並使用類似的Flatlist使用量支持複雜佈局，以簡化替換。此列表實現了對React本機的大列表的實現，其回收由側重於性能和內存使用，因此可以在列表中處理數千個項目。

您也可以在已發布的Web應用程序上嘗試它：演示

為什麼另一個列表庫？

React Native的Flatlist很棒，但是當涉及到大列表時，由於其物品緩存而存在一些缺陷。存在一些替代方案，例如react-native-largelist和recyclerlistview ，但都有一些問題。

react-native-largelist與Web和Expo不兼容，具有有時需要重新調整和維護的本機代碼，具有奇怪的列表項目回收（因為它從來沒有空白的項目），需要數據重組並在嘗試處理大量數據時遇到一些問題（例如：100,000個項目），因為它會凍結CPU。

recyclerlistview是表現的，但是在試圖滾動到安裝元素時，坐騎的空框架上有一個空框架，並且粘性標頭的實現與Animated發生衝突。

它如何工作？

回收器使有效顯示大量數據變得容易。您提供數據並定義每個項目的外觀，並且回收庫在需要時動態創建元素。顧名思義，回收者會回收這些單個元素。當項目從屏幕上滾動時，回收器不會破壞其視圖。取而代之的是，回收器重複了在屏幕上滾動的新項目的視圖。這可以大大提高性能，改善應用程序的響應能力並降低功耗。

當列表無法足夠快地渲染您的物品時，非渲染的組件將顯示為空白。

該庫完全JS本機，因此它與所有可用平台兼容： Android，iOS，Windows，MacOS，Web和Expo 。

安裝

從NPM或YARN安裝庫，只是運行以下命令行之一：

NPM	紗
npm install react-native-big-list --save	yarn add react-native-big-list

用法

還請閱讀如何從flatlist遷移

基本示例：

 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 Flatlist	部分列表

⚡️示例

摘要

• 標準列表
• 列列表
• 部分列表

博覽會

克隆或下載repo之後：

 cd Example
yarn install # or npm install
expo start

在您的設備上打開博覽會客戶端。使用它來掃描由expo start打印的QR碼。您可能需要等待一分鐘，而您的項目首次捆綁和加載。

您也可以在已發布的Web應用程序上嘗試它：演示

道具和方法

除了其特定的道具和方法之外，該列表還具有相同的捲軸道具。

？如何貢獻

有一個主意嗎？找到一個錯誤？請提出問題或提取請求。歡迎捐款，並非常感謝！每一點都有幫助，並且將永遠給予信用。