React Native - VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中

我正在使用 expo cli 为现有的 Web 应用程序开发一个应用程序。

我已完成主屏幕，但在使用时收到此警告ScrollView

VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中 相同的方向 - 使用另一个 VirtualizedList 支持的容器 反而。

我有一个文件夹screens我有网站的所有页面。所以目前我有Home.js我有不同的部分。

<View>
  <Showcase />
  <StepsList />
  <HomeInfo />
  <HomeCorporateMenu />
  <HomeMonthlyMenus />
</View>

在根组件中渲染该组件App.js。但我无法向下滚动查看其他部分。

所以我添加了SafeAreaView and ScrollView成分。现在我可以滚动，但有时我会在控制台中收到该警告。

我查了一下并找到了一些解决方案。

Added style={{ flex: 1 }} and keyboardShouldPersistTaps='always' to ScrollView成分

但仍然收到同样的警告。有什么建议么？

<SafeAreaView style={styles.container}>
  <ScrollView>
    <Header />
    <HomeScreen />
  </ScrollView>
</SafeAreaView>

显然，警告是告诉您不应该嵌套多个虚拟列表（FlatList 和 SectionList）具有相同方向的组件（列表的方向可能是vertical).

要正确执行此操作并让警告消失，您必须使用ListHeaderComponent or ListFooterComponent的支柱VirtualizedList并像这样嵌套它们：

const App = () => {
  const ListFooterComponent = (
    <>
      <FlatList
        // other FlatList props
        data={stepsListData}
      />
      <FlatList
        // other FlatList props
        data={homeInfoData}
      />
      <FlatList
        // other FlatList props
        data={homeCorporateMenuData}
      />
      {/* ... */}
    </>
  );

  return (
    <FlatList
      // other FlatList props
      data={showcaseData}
      ListFooterComponent={ListFooterComponent}
    />
  );
};

或者另一种可能解决方法（而不是官方决议）将使用FlatList与空data and renderItem道具而不是使用ScrollView。而不是这个：

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <Header />
        <HomeScreen />
      </ScrollView>
    </SafeAreaView>
  );
};

你可以使用这个：

const emptyData = [];

const renderNullItem = () => null;

const App = () => {
  const ListFooterComponent = (
    <>
      <Header />
      <HomeScreen />
    </>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={emptyData}
        renderItem={renderNullItem}
        ListFooterComponent={ListFooterComponent}
      />
    </SafeAreaView>
  );
};