Как исправить 'VirtualizedLists никогда не должен быть вложен в простые ScrollViews' Предупреждение

Question

Я получаю это предупреждение: «Виртуализированные списки никогда не должны быть вложены в простые ScrollViews» в моем собственном приложении, потому что у меня есть некоторые элементы в моем представлении прокрутки. Я искал решение и обнаружил, что для того, чтобы это исправить, мне просто нужно использовать ListFooterComponent и ListHeaderComponent, но я не могу, поскольку плоский список находится в отдельном компоненте, как вы можете видеть в коде.

Я не использовал для получения предупреждения, когда показывал только два горизонтальных плоских списка внутри моего вида прокрутки, но когда я добавил третий вертикальный плоский список, предупреждение выскочило.

Это мой вид прокрутки внутри MainScreen. js file:

  <ScrollView showsVerticalScrollIndicator={false}>
        <ResutlsList results={filterResultsByPrice("$")} title="Top News" />
        <ResutlsList results={filterResultsByPrice("$$")} title="Hot Topics" />
        <ResutlsListVer
          results={filterResultsByPrice("$$")}
          title="Latest News"
        />
      </ScrollView>

Это jsx, который компонент ResultsList возвращает для отображения Horizental FlatList:

 return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>

      <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        data={results}
        keyExtractor={(result) => result.id}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("ResultsShow", {
                  id: item.id,
                })
              }
            >
              <ResutlsDetail result={item} />
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );

Это jsx, компонент ResultsListVer возврат к отображению вертикального плоского списка:

return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>

      <FlatList
        data={results}
        keyExtractor={(result) => result.id}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("ResultsShow", {
                  id: item.id,
                })
              }
            >
              <ResutlsDetail result={item} />
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );