React Native：优化的 SectionList 在 scrollToLocation 之后不会重新呈现

Question

我构建了一个滚动 SectionList 的字母表洗涤器。 SectionList 通过使用 getItemLayout 进行了优化。如果我擦过字母表，滚动会按计划进行，但 SectionList 不会重新呈现，直到我从屏幕上松开手指。

有人知道如何解决这个问题吗？

Answer 1

要使 sectionList 动态更新，您需要将其使用的数据放入 State。这个世博会的例子（别人做的），就是一个很好的例子：

https://snack.expo.io/Syy1bqKxW

他的 panResponder 的所有数据都处于状态，并且在每个 "handlePanResponderMove" 上他调用 setState() 以在每次移动时更新位置。总而言之，如果您的数据未处于状态，则它不会为您动态更新。在 React-Native 中将数据置于状态是它动态跟踪数据变化的方式。

希望对您有所帮助！

Answer 2

通过查看PanResponder的源代码解决了它。 PanResponder 通过InteractionManager 设置交互句柄。您可以通过 this.panResponder.getInteractionHandle()（未记录的功能）访问此句柄，然后每次滚动到 SectionList 中的某个位置时清除它：

if (this.panResponder.getInteractionHandle()) {
    InteractionManager.clearInteractionHandle(
        this.panResponder.getInteractionHandle()
    );
}

这会将 SectionList 在队列中向上移动以进行可见性计算和渲染。

我建议通过尽可能少地清除交互句柄来对此进行大量优化，因为出于性能原因使用了 InteractionManager。

React Native：优化的 SectionList 在 scrollToLocation 之后不会重新呈现

React Native: Optimized SectionList does not rerender after scrollToLocation

react-native

expo