[英]ScrollViews and FlatList doesn't work together
I receive this error in my app:我在我的应用程序中收到此错误:
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.
I have and index.js我有和 index.js
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
//...
{selected === 1 && <Component1 />}
{ selected === 2 && <Component2 />}
</ScrollView>
Now inside my Component2 I have现在在我的 Component2 里面我有
<View>
//....
<CustomFlatList data={dataPermission()}
</View>
I use this dataPermission to popolute "data"我使用此 dataPermission 来填充“数据”
and at the end in my CustomFlatList I use the FlatList最后在我的 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>
)
}
Now my problem is that I have used in the index.js a ScrollView with inside a FlatList and I suppose that is the problem.现在我的问题是我在 index.js 中使用了一个带有 FlatList 的 ScrollView,我想这就是问题所在。
In your opinion how can I do to fix this error?您认为我该怎么做才能解决此错误?
Thank you谢谢
The error message is straight forward: You should never nest a FlatList
inside a ScrollView
.错误消息很简单:永远不要将
FlatList
嵌套在ScrollView
中。 This is because the parent scroll action dominates the child scroll action
.这是因为父
scroll action dominates the child scroll action
。
This problem is easy to resolve.这个问题很容易解决。 Replace the parent
ScrollView
with a normal View
.将父
ScrollView
替换为普通View
。 The FlatList
already supports scrolling. FlatList
已经支持滚动。 If you have multiple sections (ie different data sets), then you might want to use a SectionList .如果您有多个部分(即不同的数据集),那么您可能想要使用SectionList 。
Remark: You can usually achieve visually the same with a ScrollView
as you could do with a FlatList
BUT备注:您通常可以使用
ScrollView
实现与使用FlatList
BUT 时相同的视觉效果
ScrollView renders all its react child components at once, but this has a performance downside.
ScrollView 一次渲染它的所有 React 子组件,但这有性能上的缺点。
Thus, it is advised to use a FlatList
whenever one want to render data inside a scrollable container.因此,无论何时想要在可滚动容器中呈现数据,都建议使用
FlatList
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.