ScrollViews 和 FlatList 不能一起工作

Question

我在我的應用程序中收到此錯誤：

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，我想這就是問題所在。

您認為我該怎么做才能解決此錯誤？

謝謝

Answer 1

錯誤消息很簡單：永遠不要將FlatList嵌套在ScrollView中。 這是因為父scroll action dominates the child scroll action 。

這個問題很容易解決。 將父ScrollView替換為普通View 。 FlatList已經支持滾動。 如果您有多個部分（即不同的數據集），那么您可能想要使用SectionList 。

備注：您通常可以使用ScrollView實現與使用FlatList BUT 時相同的視覺效果

ScrollView 一次渲染它的所有 React 子組件，但這有性能上的缺點。

因此，無論何時想要在可滾動容器中呈現數據，都建議使用FlatList 。