[英]ScrollViews and FlatList doesn't work together
我在我的应用程序中收到此错误:
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 中使用了一个带有 FlatList 的 ScrollView,我想这就是问题所在。
您认为我该怎么做才能解决此错误?
谢谢
错误消息很简单:永远不要将FlatList
嵌套在ScrollView
中。 这是因为父scroll action dominates the child scroll action
。
这个问题很容易解决。 将父ScrollView
替换为普通View
。 FlatList
已经支持滚动。 如果您有多个部分(即不同的数据集),那么您可能想要使用SectionList 。
备注:您通常可以使用ScrollView
实现与使用FlatList
BUT 时相同的视觉效果
ScrollView 一次渲染它的所有 React 子组件,但这有性能上的缺点。
因此,无论何时想要在可滚动容器中呈现数据,都建议使用FlatList
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.