平面列表滚动不流畅

Question

我正在使用 React Native 中的 FlatList 构建提要。我通过对服务器进行异步调用来分页并获取每页 10 行。

我正在使用 onEndReached 和 onEndReachedThreshold 来调用获取下一页数据的函数。提要的页码和数据存储在组件状态中。

当我从服务器接收到数据时，我连接到状态中的数据。 flatlist 数据道具设置为状态中的数据。

但是，当我浏览提要时，我遇到了紧张的行为并且提要不流畅。

我正在使用 Pure 组件来呈现提要项。但是，每个提要项都有一些状态，因为它们是交互式组件。

解决这种紧张行为的一种方法是将平面列表放在滚动视图中。它确实使饲料顺利。但是，现在的问题是平面列表的 onEndReached 事件非常频繁地被触发。事实上，我什至不必滚动，并且平面列表 onEndReached 会不断触发。

1. 有谁知道如何阻止这种情况？
2. 是否有最佳实践 在 React Native 中构建提要。特别是，如果饲料项目是 具有交互性且包含状态的组件？

我是否应该将所有数据作为道具传递给提要项目，并且按照此处的建议在其中没有任何状态 (https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html)

“当内容滚动出渲染窗口时，不会保留项目子树的内部状态。确保在项目数据或外部存储（如 Flux、Redux 或 Relay）中捕获所有数据”

在这种情况下，我将如何管理 Feed 项的状态？

任何帮助将不胜感激。

一些代码：

<ScrollView
    ref="scrollViewRef"
    style={styles.container}
    contentContainerStyle={styles.contentContainer}
    scrollEnabled={true}>
    <FlatList
      ref="listRef"
      data={this.state.content}
      extraData={this.state}
      keyExtractor={item => item.id}
      renderItem={this._renderItem}
      onEndReached={this._onEndReached}
      onEndReachedThreshold={0.2}
      onRefresh={this._onRefresh}
      refreshing={this.state.refreshing}
      ItemSeparatorComponent={this._separator}
      ListHeaderComponent={this._separator}
      ListFooterComponent={this._separator}
    />
</ScrollView>

Answer 1

使用FlatList时需要注意的几点。

1. FlatList 本来就已经实现了 ScrollView。因此，您应该能够开箱即用地滚动浏览数据列表。
2. 最好为即将用getItemLayout 渲染的组件定义一个维度。这样可以节省一些计算渲染所需尺寸的内存。
3. PureComponent 有时无法按预期工作。最好在组件中定义自己的shouldComponentUpdate。

我正在处理一个日历项目，我的数据数组包含数百个数据，结果非常顺利。但是只有在数据列表之间切换时我确实遇到了问题。尽管如此，这无论如何都是不可能的。这个problem 仍未解决。

希望我的发现有所帮助！

Answer 2

不要将FlatList 放在ScrollView 中。 FlatList 本身有一个ScrollView。

此外，如果您的列表很大，您可以在FlatList 中添加一个属性，如下所示

<FlatList
    ... 
    contentContainerStyle = {{ flex: 1 }}/>
{/* Your other properties represent those three dots '...' */}

这意味着在您的 contentContainerStyle 中添加 { flex: 1 } 可能会对您有所帮助，只是一个建议......不过对我有用。