Question

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

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

当我从服务器接收数据时，我将连接到处于状态的数据。平面清单数据道具被设置为处于该状态的数据。

但是，当我浏览提要时，我会感到不安，并且提要不流畅。

我正在使用Pure组件渲染提要。但是，每个提要项都是交互式组件。

一种解决抖动行为的方法是将平面列表放在滚动视图中。确实确实使进料顺畅。但是，现在的问题是，针对该列表的onEndReached事件非常频繁地被触发。实际上，我什至不必滚动，并且onEndReached的flatlist会不断触发。

有人知道如何停止吗？
是否有最佳实践在React native中构建一个feed特别是如果饲料项目是交互并包含状态的组件？

我应该将所有数据作为道具传递给供稿项目，并且其中没有任何状态，如此处建议的那样（https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html）

“当内容滚动到渲染窗口之外时，不会保留项目子树的内部状态。请确保所有数据都已捕获到项目数据或Flux，Redux或Relay之类的外部存储中”

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

任何帮助将不胜感激。

某些代码：

<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时需要注意的几件事。

FlatList本质上已经实现了ScrollView。因此，您应该可以在框中直接浏览数据列表。
最好为将要使用getItemLayout渲染的组件定义尺寸。这样，您可以节省一些内存来计算渲染所需的尺寸。
PureComponent有时无法正常工作。最好在组件中定义自己的shouldComponentUpdate。

我当时正在做一个Calendar项目，我的数据数组包含数百个数据，结果非常平滑。但是只有在数据列表之间切换时，我确实有问题。尽管如此，这仍然是不可能的。此problem仍未解决。

希望我的发现有帮助！

Answer 2

请勿将FlatList放在ScrollView内。 FlatList本身有一个ScrollView。

此外，如果列表很大，则可以像下面这样在FlatList中添加一个属性

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

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

平面列表滚动不流畅

2 个答案: