ScrollViews和FlatList不一起工作
ScrollViews和FlatList不一起工作
提问于 2022-03-17 16:18:11
我在我的应用程序中收到了这个错误：
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.我有和index.js
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
//...
{selected === 1 && <Component1 />}
{ selected === 2 && <Component2 />}
</ScrollView>现在在我的Component2里
<View>
//....
<CustomFlatList data={dataPermission()}
</View>我使用这个dataPermission来打开“数据”。
最后，在我的CustomFlatList中，我使用FlatList
const renderItem = () => {
<TouchableOpacity style={[styles.row]}>
//....
</TouchableOpacity>
}
if (data.length == 0) {
return (
<View style={styles.container}>
//....
</View>
)
} else {
return (
<View style={styles.container}>
<FlatList data={data} renderItem={renderItem} />
</View>
)
}现在我的问题是，我在index.js中使用了一个ScrollView，里面有一个FlatList，我想这就是问题所在。
在你看来，我怎样才能纠正这个错误呢？
谢谢
回答 1
Stack Overflow用户
发布于 2022-03-17 17:09:52
错误消息是直截了当的:您不应该将FlatList嵌套在ScrollView中。这是因为父scroll action dominates the child scroll action。
这个问题很容易解决。将父ScrollView替换为普通View。FlatList已经支持滚动。如果您有多个部分(即不同的数据集)，那么您可能需要使用一个SectionList。
备注：，您通常可以在视觉上实现与ScrollView相同的效果，就像使用FlatList时一样
ScrollView同时呈现其所有的反应性子组件，但这会降低性能。
因此，建议在希望在可滚动容器中呈现数据时使用FlatList。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71515724
复制相关文章
相似问题
腾讯云开发者
