React Native - VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中 [英] React Native - VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

问题描述

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

I'm working on an app for existing web application with expo cli.

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

I have completed the home screen but I'm getting this warning when using ScrollView

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

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

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

I have a folder screens where I've all the pages of the website. so currently I have Home.js where I have different sections.

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

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

Then rendeing this component in the root component App.js. but I was not able to scroll down to see other sections.

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

So I've added SafeAreaView and ScrollView components. now I'm able to scroll but sometimes I get that warning in the console.

我查了一下，找到了一些解决方案.

I have looked it up SO and found some solutions.

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

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

但仍然收到相同的警告.有什么建议吗?

But Still getting the same warning. Any suggestions?

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

推荐答案

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

The warning is, obviously, telling you that you shouldn't nest multiple VirtualizedList (FlatList and SectionList) components with the same orientation (the orientation of your lists is probably vertical).

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

To do it properly, and for the warning to disappear, you have to use the ListHeaderComponent or ListFooterComponent prop of the VirtualizedList and nest them like this:

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

或者另一种可能的解决方法(不是官方解决方案)是使用带有空 data 和 renderItem<的 FlatList/code> 道具而不是使用 ScrollView.而不是这个:

Or another possible workaround (and not an official resolution) would be to use a FlatList with empty data and renderItem props instead of using a ScrollView. Instead of this:

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

这篇关于React Native - VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！