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

【问题标题】：React Native - VirtualizedLists should never be nested inside plain ScrollViews with the same orientationReact Native - VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中
【发布时间】：2021-04-04 09:56:31
【问题描述】：

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

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

VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中相同的方向 - 使用另一个 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>

【问题讨论】：

标签： react-native expo scrollview

【解决方案1】：

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

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

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 和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>
  );
};

【讨论】：