How to fix error VirtualizedLists should never be nested inside plain ScrollViews

Question

我在

SectionList

里面有一个

ScrollView

，我得到了错误

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

我试过使用

Flatlist

而不是

SectionList

但我遇到了同样的问题。

我该如何解决这个错误？我应该使用

.map

来渲染我的组件吗？因为

.map

在有大量数据时并不理想

组件的结构是：

<SafeAreaView>
  <FocusedStatusBar/>
  <ScrollView>
  <DetailsHeader/> 
  <SubInfo / >
  <View>
    <View>
      <Text> Text </Text>
    </View>
    
    <Text> Text </Text>
    <FormTextInput/>
    <FormTextInput/> 
    <FormTextInput/>
    
    <Text> Text </Text>
    <TouchableOpacity>
      <Text> Text </Text> 
      <Image/>
    </TouchableOpacity>
    {showModal && ( 
      <View>
        <View>
        <Image/> 
        <TextInput/>
        </View>
        
        <SectionList 
          sections = {[
            { title: 'D',
             data: ['Devin', 'Dan', 'Dominic']
            },{
             title: 'J',
             data: ['Jackson','James', 'Jillian', 'Jimmy', 'Joel','John', 'Julie'],
             }]}
             
          renderItem = {({item}) => <Text> {item} </Text>}
          renderSectionHeader = {({section}) => (<Text>{section.title} </Text>)}
          keyExtractor = {item => `basicListEntry-${item}`}
         /> 
      </View>
      )}
      
    <Text> TEXT </Text> 
    <TouchableOpacity>
      <Text> {file.filename} </Text> 
      <Image/> 
     </TouchableOpacity>

     <View>
      <TextButton/> 
     </View> 
    </View> 
  </ScrollView> 
</SafeAreaView>