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应用程序上尝试它：演示

道具和方法

除了其特定的道具和方法之外，该列表还具有相同的卷轴道具。

？如何贡献

有一个主意吗？找到一个错误？请提出问题或提取请求。欢迎捐款，并非常感谢！每一点都有帮助，并且将永远给予信用。