React native React Native-VirtualizedList不应嵌套在具有相同方向的纯滚动视图中

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

我已完成主屏幕，但在使用

ScrollView

VirtualizedList不应嵌套在带有 相同的方向-使用另一个VirtualizedList支持的容器 相反

我有一个文件夹

screens

，在那里我有网站的所有页面。因此，目前我有

Home.js

，其中有不同的部分

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

---

很明显，警告告诉您不应该嵌套具有相同方向的多个（FlatList和SectionList）组件（列表的方向可能是垂直的）

要正确执行此操作，并使警告消失，您必须使用

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

您可以使用以下选项：

const emptyData = [];

const renderNullItem = () => null;

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

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

const emptyData=[]；
const renderNullItem=（）=>null；
常量应用=（）=>{
常量ListFooterComponent=(
);
返回(
);
};

很明显，警告告诉您不应该嵌套多个方向相同的组件（FlatList和SectionList）（列表的方向可能是垂直的）

要正确执行此操作，并使警告消失，您必须使用

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

您可以使用以下选项：

const emptyData = [];

const renderNullItem = () => null;

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

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

const emptyData=[]；
const renderNullItem=（）=>null；
常量应用=（）=>{
常量ListFooterComponent=(
);
返回(
);
};