React-native-snap-carousel: 用另一个组件替换FlatList？

两个主要缺点：

• 第一个扩展了ScrollView 。
• 第二个是本机插件，但是它没有实现FlatList缺少的功能，这些功能会大大改善轮播（滚动持续时间，滚动回调...）。

坦白说，我发现FlatList不可用。 我对react-native-snap-carousel （我爱BTW）的解决方法是将initialNumToRender为data.length 。 这是获得无错误版本的唯一方法。
这是我的安装后脚本的摘录：

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

现在，如果react-native-snap-carousel支持一项允许我从外部设置initialNumToRender ，这样我就不必再修补Carousel.js那就太好了。
我还要指出，如果预期的项数少于100（可能是所有用例的90％），则Carousel.js可能希望将initialNumToRender默认设置为data.length 。

在上面找到的两个库中，我发现react-native-largelist非常有趣。 是否可以解决缺少的功能，或者说服作者添加这些功能？

嘿@PublicParadise ，

好吧， initialNumToRender是可替代道具的一部分，因此您应该能够使用<Carousel initialNumToRender={data.length} />而不需要任何补丁;-)我可以保证它能正常工作，因为我已经尝试过了＃235。

但是，如果您必须这样做，并且因此准备忘记FlatList应该具有的性能优化，我建议将useScrollView为true 。 我最近在考虑到这种用例的情况下介绍了该道具，并完全绕开了完全是马车的FlatList 。 而且，它允许引入类似这样的很棒的功能：p

关于我正在考虑的两个插件，我需要首先运行很多测试。 如果我们能够说服react-native-largelist的作者实现缺少的但必不可少的功能，那肯定会有所帮助！

请注意，目前我还没有信心将自己的插件基于本机插件，因为如果作者停止这样做，我将无法维护它（而接管JS插件我没有问题）。

@ bd-arc，您好！

感谢您的提示。 老实说，我对FlatList感到非常沮丧，以至于我放下了hack，再也没有接触过该组件。 那时initialNumToRender并不是一个可以重写的道具，而useScrollView似乎更好。

似乎FlatList对Animated有一些奇怪的依赖性。 这可能是大多数人遇到问题的地方。 就在6天前，有人对此提出了新的错误。

我本人也在寻找替换FlatList ，并做了一些研究。 窗口列表和呈现视图中的内容似乎并不困难。 我最喜欢RxJS / most.js解决方案。

您是否有幸实施这两种解决方案之一作为替代方案？

不，我只做研究。 那时，我仍然希望他们最终能解决FlatList 。
让我分享我的研究中的一些链接：

• 使用RxJS Observables进行响应式编程中的天真无限滚动
• 将RxJS与React一起使用
• 回收行以生成高性能React Native列表视图
• 反应本机ListView实验
• 使用cycle.js滚动表
• 使用Bacon.js创建无限滚动列表
• 无限培根到rxjs的粗略翻译

但是我觉得原生插件（ react-native-largelist ）是正确的方法。

感谢您分享您的研究👍

老实说，我现在没有时间对所有这些进行测试。 如果您想潜入react-native-largelist ，那将有很大的帮助。 如果没有，请确保彼此保持贴合；-)

更新：在挖掘这些链接时，我意识到来自wix.com Tal Kol有一个非常不错的Medium博客。 到目前为止，我喜欢他的所有文章。 这可能与我们的讨论有关：

• 重新讨论本机ListView性能—无需桥接即可回收
• BindingListView-支持直接视图绑定的React Native ListView实验实现

@ bd-arc在这里，我的工作非常艰苦，我的时间和资源都很有限。
我可能会看一下BindingListView 。 但是是的：让我们彼此保持循环:)

是的，Tal Kol写了一些有关React Native和性能优化的高质量文章。

另外，我对Wix的插件react-native-interactable特别感兴趣，但是不幸的是，他们最近没有时间解决一些讨厌的问题。

@ bd-arc recyclerlistview扩展ScrollView什么问题？ large-list和FlatList建立在相同的基础上。
我写了recyclerlistview，最近我的团队使用了该轮播组件。 我们用Recyclerlistview交换了FlatList，效果很好。

嘿@naqvitalha ，谢谢您的

根据我的经验，直到现在，在有大量要处理的项目和/或功能限制的情况下，构建在ScrollView所有东西最终都显示出性能限制。 但是请放心，我的目标是被证明是错误的;-)

您是否有兴趣为此发展提交PR，以便对其进行广泛而全面的测试？

@ bd-arc当然。 我来做

@naqvitalha @ bd-arc PR的任何状态更新都可以将flatlist替换recyclerlistview吗？ 我想用它

与ScrollView FlatList和recyclerlistview无关，但是有没有人研究过react-native-gesture-handler可以如何改善此lib？

从文档：

使用此库，手势不再由JS响应器系统控制，而是在UI线程中被识别和跟踪。 它使触摸交互和手势跟踪不仅顺畅，而且可靠且确定。

它需要react-native link ，这在保持此lib依赖项自由方面是不幸的。 但现在它已包含在Expo / CRNA中。

嘿@ pcooney10 ，

我以前曾考虑在ScrollView / FlatList一个之上实现自定义PanResponder （如您在＃40中所见）。

您是否尝试过使用react-native-gesture-handler做类似的事情？ 我很想得到一些反馈，以确定这是一个合法的想法还是发疯的直接方法...

@amitassaraf该组件的合同与FlatList非常相似，因为传递了道具。 对于RLV布局提供程序是强制性的。 这将是一个巨大的变化，或者我们需要引入一种新的模式。

大家好，我想分享一些使用此组件的经验。 我需要在ScrollView使用它，这产生了一个问题，即所有项目都将被显示多于您所指示的属性removeClippedSubviews的元素不会从内存中删除，否则，每个路径创建了新元素，导致应用程序耗尽了Android中的RAM内存。要在ScrollView （或其他列表）中正确执行列表的操作，请使用以下FlatList属性。

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

根据您的情况，您可以配置最适合您的需求的值。 这样，您将获得预期的性能，几乎没有内存泄漏

@ machester4感谢您分享您的发现！ 这些值并不适合每个人的用例，但是方法是合理的;-)

您可以将该逻辑应用于垂直列表中的水平列表。 就我而言，我所有的水平列表一次都有3个可见元素。 因此， maxToRenderPerBatch和initialNumToRender的值在4中，这是我为用户带来更好体验的地方。

@naqvitalha您能否分享在轮播中如何用RecylerView替换FlatList？ 另外，您在RecyclerView中支持https://github.com/facebook/react-native/issues/20500吗？

@ bd-arc抬起头，我很确定这会影响react-native-snap-carousel客户：
https://github.com/facebook/react-native/issues/21070

感谢您的注意@PublicParadise！

FlatList永不停歇……似乎InteractionManager可能正在某处运行，从而推迟了组件逻辑的执行。

绝对是时候摆脱FlatList了:-)

嗨，到目前为止，该领域有任何更新吗？

在我看来，实际上FlatList具有成为真正出色的列表组件所需要的条件。
它所缺少的只是UITableView在iOS上具有的“估计行高”的概念。
因此，您不需要“我应该异步布局多少行来进行一些黑客和骗术”的属性。

正如我所说，我们需要的只是一个estimatedRowHeight （可能具有回调功能，以允许每行不同的估计，但仍然是估计！）。

• 这将用于计算滚动视图的内容大小。
• 滚动到偏移量将直接滚动到它。
• 每当您渲染行时-在布局后缓存它们的大小。
• 使用缓存的大小+估计的行高可以快速计算项目的偏移量或项目的偏移量。
• 我们也不能考虑在项目索引很高之前所有行的估计/缓存，而仅使用某种窗口大小，而对其余行使用平均估计。

因此，内容大小将动态变化，但是没有人会在乎或感觉到它，因为您可以滚动到最后一项或任何其他索引，并且可以毫无故障地到达那里，并且您将不会做太多的工作滚动时缺少项目。

@naqvitalha ，您好：您是否有一些分支机构或PR打算将该组件列表迁移到RLV？ 对我来说将非常有用。 谢谢。

感谢您尝试使用我的组件。

对于几乎所有场景，您都应该这样：

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

并确保所有Carousel的父母都包含{ flex：1 }样式。

请注意以下提示：

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

如果您希望LargeList的项目支撑LargeList的大小，则它不能很好地工作。 您应该确认您的LargeList大小是从其父级或有界高度继承的。

如果您会中文，请原谅我的英语池。 看看这个问题

FlatList部分太小了，期间。

这些插件可能构成一个有趣的替代品：

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

说得好