react-native - FlatList 在加载或刷新数据时锁定点击

Question

我正在使用FlatList组件通过分页处理大量数据（请求 15 x 15 进行测试）。

<FlatList
    data={this.state.noMatches? this.state.monitorados : this.state.filtrados}
    keyExtractor={item => item.identificador}               
    ListFooterComponent={this.renderFooter}
    refreshing={this.state.refreshing}
    onRefresh={() => this.handleRefresh()}
    style={styles.list}
    onEndReached={() => this.handleScroll()}
    onEndThreshold={0.5}
    renderItem={({item}) =>  (<SimpleItem item={item} />)} 
/>

我在每一行都有一个展开/折叠动画和嵌套组件。我正在使用自定义组件来处理动画、一些数据选择器、视图、文本和其他常见的。

呈现前 15 行时，我尝试单击展开，但它没有立即响应。几秒钟后，我可以单击该项目并展开，但它滞后了很多。再多几秒钟，我可以很好地展开/折叠，列表的每一项都会立即做出反应。

如果我向下滑动，则需要再请求 15 个项目，然后所有这些都会再次发生：点击被锁定，第一次点击滞后如此之多，下一次是高性能的。

动图演示：

问题：

1. 即使组件仍在加载，我能否以某种方式解锁点击以展开/折叠？
2. 有什么方法可以优化 flatlist 性能吗？

已经尝试过：

1. 将嵌套组件移动到其他文件并使其成为纯组件。
2. 删除了样式。
3. 删除了 TouchableOpacity 中的展开/折叠和测试点击 - 同样的问题。

标签： react-nativejsxreact-native-flatlist