React native 平面列表滚动不平滑

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

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

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

然而，当我浏览提要时，我会体验到神经过敏的行为，并且提要并不平滑

我使用纯组件来渲染feeditems。但是，每个提要项都有一些状态，因为它们是交互式组件

避开这种紧张行为的一种方法是将平面列表放在scrollview中。它确实使饲料顺利。但是，现在的问题是，为平面列表触发onEndReached事件的频率非常高。事实上，我甚至不需要滚动，而且OneDreached的平面列表一直在不断地启动

有人知道如何阻止这种情况吗

是否有最佳实践 在React native中构建提要。特别是，如果饲料项目是 哪些组件是交互式的，并且包含状态

我是否应该将所有数据作为道具传递给提要项，而不是像这里建议的那样在其中包含任何状态（）

当内容从呈现窗口滚出时，项目子树的内部状态不会保留。请确保所有数据都在项目数据或外部存储（如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>

项目id}
renderItem={this.\u renderItem}
onEndReached={this.\u onEndReached}
onEndReachedThreshold={0.2}
onRefresh={this.\u onRefresh}
刷新={this.state.refreshing}
ItemSeparatorComponent={this.\u separator}
ListHeaderComponent={this.\u separator}
ListFooterComponent={this.\u separator}
/>

使用平面列表时需要注意的几件事

FlatList

固有地已经实现

ScrollView

。因此，您应该能够在开箱即用的数据列表中滚动

最好为即将使用

getItemLayout

渲染的组件定义一个维度。通过这种方式，您可以在计算渲染所需的尺寸时节省一些内存

PureComponent

有时无法按预期工作。最好在组件中定义自己的

shouldComponentUpdate

我在做一个日历项目，我的数据数组包含数百个数据，结果非常顺利。但我只有在数据列表之间切换时才遇到问题。然而，无论如何，这是不可能的。这一问题仍未解决

---

希望我的发现能有所帮助

不要将

平面列表

放在

滚动视图

中<代码>平面列表本身有一个

滚动视图

此外，如果您有一个大列表，您可以在

平面列表中添加一个属性，如下所示

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


{/*您的其他属性表示这三个点“…”*/}

这意味着在
contentContainerStyle
中添加
{flex:1}
可能会对您有所帮助，只是一个建议。。。不过对我来说很有效。
@TahmeedRahman当我使用
contentContainerStyle={{flex:1}}
时，我的平面列表甚至没有滚动。这对我来说很有效，非常紧张，无法点击任何东西（冻结-必须关闭并重新打开应用程序），但将contentContainerStyle添加到
flex:1
中修复了它，甚至将普通样式设置为flex:1，但实际上不是。感谢上述解决方案？