React Native 中的错误 - VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它可能会中断

Question

我是 react native 的新手。

我的问题很简单：我有这个 -> 错误 VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。 我需要这个 ScroolView，因为我也想滚动标题，而不仅仅是 FlatList。任何建议如何解决？这是我的代码

    <ScrollView style={styles.container}>
            <Header firstHeader="My Collegues" secondHeader="All your collegues" backgroundImage="Blue" />
            <View style={styles.content}>
                <View style={styles.filterCompany}>
                    <TouchableOpacity style={styles.buttonFilter}>
                        <Text style={styles.companyName}>Hello B</Text>
                        <AntDesign style={styles.iconButton} name="downcircleo" size={20} color="white" />
                    </TouchableOpacity>
                </View>
                <View style={styles.safeAvatar}>
                    <FlatList
                        contentContainerStyle={{ flex: 1 }}
                        numColumns={3}
                        data={pomArray}
                        renderItem={renderItem as any}
                    />
                </View>
            </View>
        </ScrollView>

Answer 1

你得到这个的原因是在幕后，ScrollView 和 Flatlist 都使用 VirtualizedList 来呈现它们的内容。在像你这样的情况下，最好删除主滚动视图并将主标题变成一个单独的组件，然后你可以使用ListHeaderComponentprop 添加到你的平面列表中。最终的代码看起来像这样：

const FlatListHeader = () => (
  <Header firstHeader="My Collegues" secondHeader="All your collegues" backgroundImage="Blue" />
  .
  .
  .
)

const App = () => {
  .
  .
  .
  <Flatlist contentContainerStyle={{ flex: 1 }} numColumns={3} data{pomArray} renderItem={renderItem as any} ListHeaderComponent={FlatlistHeader} />
  .
  .
  .

}

您可以了解更多关于平面列表页眉和页脚Here

Answer 2

我在 ScrollView 中使用 DropDownPicker 时遇到了类似的问题。 我将 overScrollMode 放在 ScrollView 中，它解决了问题。 试试这样，告诉我它是否有效。

<ScrollView overScrollMode>
...
<ScrollView/>