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