React Native 在 Modal 中使用 Accordion 报 VirtualizedLists 错误如何解决

该报错是同方向滚动容器嵌套导致的：NativeBase v2版本的Content组件底层封装了React Native原生普通ScrollView，而Accordion组件内部实现用到了虚拟列表VirtualizedList，两个垂直方向的滚动容器嵌套会破坏虚拟列表的窗口化逻辑，触发警告甚至导致滚动、渲染异常。

按使用场景优先级排序如下：

• 方案1：替换Content为普通View
  如果Modal内部不需要外层容器的滚动能力，直接删除Content组件，替换为普通View并设置对应内边距、布局样式即可，修改后代码如下：

import React from 'react';
import {
  Modal, 
  View,
  StyleSheet
} from 'react-native';
import { Container, Header, Accordion } from "native-base";

export const EarthquakeModal = ({ setModalVisible, modalVisible }) => {
  const dataArray = [
    { title: "First Element", content: "Lorem ipsum dolor sit amet" },
    { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
    { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
  ];
  
  return (
    <View style={styles.centeredView}>
      <Modal 
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <View style={styles.centeredView}>
          <Container>
            <Header />
            {/* 原Content替换为普通View，padding对应padder属性效果 */}
            <View style={{padding: 16, flex: 1}}>
              <Accordion dataArray={dataArray} expanded={0}/>
            </View>
          </Container>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)'
  }
})

• 方案2：保留Content，禁用其滚动能力
  如果需要保留Content的其他样式特性，直接给Content添加scrollEnabled={false}属性即可关闭外层ScrollView的滚动能力，消除嵌套冲突：

<Content padder scrollEnabled={false}>
  <Accordion dataArray={dataArray} expanded={0}/>
</Content>

• 方案3：需要Modal整体内容可滚动
  如果Modal内整体内容高度超过屏幕，需要外层也支持滚动，可将外层Content替换为FlatList（本身就是VirtualizedList的封装），符合报错提示中「使用VirtualizedList支撑的容器」的要求，Accordion作为FlatList的渲染内容即可。

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