如何在Modal中使用FlatList？解决嵌套ScrollView报错问题

报错原因是Modal.Body内部默认实现了ScrollView，和你嵌套的FlatList（基于VirtualizedList）属于同方向滚动，这种嵌套会破坏VirtualizedList的窗口化优化，引发报错。

下面是几种可行的修复方案：

方案一：禁用Modal.Body的滚动 #

给Modal.Body添加scrollEnabled={false}属性，同时设置flex={1}让它撑满剩余空间，把滚动控制权完全交给FlatList：

<Modal size="full">
  <Modal.Content minHeight="100%" flex="1">
      <Modal.Header>
         ...
      </Modal.Header>

      <Modal.Body px={0} py={1} scrollEnabled={false} flex={1}>
          <Flex flex={1}>
              <FlatList
                ...
              />
          </Flex>
      </Modal.Body>

      <Modal.Footer borderTopWidth={0} justifyContent="center">
         ...
      </Modal.Footer>
  </Modal.Content>
</Modal>

方案二：替换Modal.Body为普通容器 #

如果不需要Modal.Body自带的滚动功能，直接用Flex或View替代它，彻底消除嵌套滚动的根源：

<Modal size="full">
  <Modal.Content minHeight="100%" flex="1">
      <Modal.Header>
         ...
      </Modal.Header>

      {/* 用Flex替代Modal.Body，移除默认ScrollView */}
      <Flex px={0} py={1} flex={1}>
          <FlatList
            ...
          />
      </Flex>

      <Modal.Footer borderTopWidth={0} justifyContent="center">
         ...
      </Modal.Footer>
  </Modal.Content>
</Modal>

方案三：开启FlatList的嵌套滚动（不推荐优先使用） #

如果必须保留Modal.Body的滚动，可以给FlatList添加nestedScrollEnabled={true}属性，但这种方式可能影响VirtualizedList的性能优化，仅在不得已时使用：

<FlatList
  nestedScrollEnabled={true}
  // 其他属性...
/>

内容的提问来源于stack exchange，提问作者AlexMoshi