React Native报错：VirtualizedLists不可嵌套同方向普通ScrollViews

错误原因 #

VirtualizedLists 绝不应该嵌套在同方向的普通ScrollView中，这会破坏窗口化和其他功能

FlatList是VirtualizedList的封装实现，自带窗口化渲染优化（仅渲染可视区域内的条目）。如果将它嵌套在同方向的ScrollView中，会导致FlatList的优化逻辑失效，同时引发滚动冲突、性能下降等问题。

解决方案 #

方案1：用FlatList替代外层ScrollView（推荐） #

将页面顶部的静态内容作为FlatList的ListHeaderComponent，整个页面仅保留一个FlatList组件，既符合React Native的最佳实践，又能完整保留滚动优化特性。

修改后的代码：

return (
  {isLoading ? <ActivityIndicator/> : (
    <FlatList
      data={data}
      horizontal={true} // 修正原代码错误：用horizontal替代vertical={false}
      keyExtractor={({ id }, index) => id.toString()}
      ListHeaderComponent={() => (
        <View style={styles.container}>
          <View style={{width:'100%',padding:20,backgroundColor:"#eeeeee",}}> 
            <View>
              <Image style={styles.imageThumnail} source={require('../assets/coba.jpg')} />
              <Text style={{ 
                lineHeight:24, 
                fontWeight:'600', 
                width:'90%',
                color: '#fff', 
                bottom: 20, 
                alignSelf: 'center', 
                fontSize:18, 
                position: 'absolute',
              }}>SuperCel Rilis Trailer Squad Buster Bertabur Bintang</Text>
            </View>
          </View>
          <View style={{backgroundColor:'#fff',padding:5}}>
            <View style={styles.containerBoxArtikel}>
              <Text style={{color: 'black',marginTop:15,marginBottom:5,fontSize:18, fontWeight:'900'}}>Terkini</Text>
            </View>
          </View>
        </View>
      )}
      renderItem={({ item }) => (
        <View style={styles.boxArtikel}>
          <View style={{flexDirection: 'column',width:'40%',height:140,backgroundColor:'#fff'}}>
            <Image style={styles.imageArtikelLeft} source={{uri: item.cover }} />
          </View>
          <View style={{flexDirection: 'column', width:'56%',height:150,backgroundColor:'#fff',paddingLeft:12}}>
            <Text style={{ 
              lineHeight:24,
              color: 'black',
              fontSize:16, 
              fontWeight:'600'
            }}> {item.title}</Text>
          </View>
        </View>
      )}
    />
  )}
)

方案2：保留外层ScrollView，修复FlatList配置 #

如果必须保留外层纵向ScrollView，需要确保FlatList的滚动方向与外层不同（这里应为横向），同时给FlatList添加nestedScrollEnabled={true}属性，解决滚动冲突：

修改后的代码片段：

<ScrollView> 
  <View style={styles.container}> 
    {/* 顶部静态内容... */}
    <View style={{backgroundColor:'#fff',padding:5}}> 
      <View style={styles.containerBoxArtikel}>
        <Text style={{color: 'black',marginTop:15,marginBottom:5,fontSize:18, fontWeight:'900'}}>Terkini</Text> 
        {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          horizontal={true} // 修正方向配置，替换原错误的vertical={false}
          nestedScrollEnabled={true} // 添加该属性启用嵌套滚动
          keyExtractor={({ id }, index) => id.toString()}
          renderItem={({ item }) => (
            {/* 条目渲染内容... */}
          )}
        />
        )} 
      </View>
    </View>   
  </View>
</ScrollView>

关键注意点 #

• 原代码中FlatList的vertical={false}是错误写法，React Native中控制横向滚动的属性是horizontal={true}。
• 尽量避免同方向的Virtualized组件（FlatList/SectionList）与ScrollView嵌套，这是React Native的性能优化禁忌。

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