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

Question

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

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

VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中 - 请改用另一个 VirtualizedList 支持的容器。

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

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

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

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

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

添加style={{ flex: 1 }}和keyboardShouldPersistTaps='always'到ScrollView组件

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

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

Answer 1

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

为了正确地做到这一点，并且为了使警告消失，您必须使用 的ListHeaderComponent或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和renderItemprops 的 a 而不是使用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>
  );
};