React 本机错误 virtualizedLists 永远不应嵌套在普通 ScrollViews 中

Question

我有错误React Native错误virtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中，因为它可能会破坏窗口和其他功能

这是我的代码：

return(
 
  <ScrollView> 
      <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> 
        {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          vertical={false}
          keyExtractor={({ id }, index) => id}
          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>
          )}
        />
      )} 
     </View>
     </View>   


     </View>
      </ScrollView> 
 
      
)
}

有人可以帮我解决这个错误吗

Answer 1

这个问题已经被问过很多次了，我认为可以在here找到解释解决此问题的多种方法的更好的线程之一。您的具体示例是在

ListHeaderComponent

中找到的道具

ListFooterComponent

和

FlatList

。这是您的代码，为了便于阅读，添加了一些更改：

const HeaderComponent = () => (
  <View style={styles.headerContainer}>
    <Image style={styles.imageThumbnail} source={require('../assets/coba.jpg')} />
    <Text style={styles.headerText}>
      SuperCel Rilis Trailer Squad Buster Bertabur Bintang
    </Text>
  </View>
);

return (
  <View style={styles.container}>
    <FlatList
      data={isLoading ? [] : data}
      ListHeaderComponent={HeaderComponent}
      keyExtractor={({ id }, index) => id}
      renderItem={({ item }) => (
        <View style={styles.boxArtikel}>
          <View style={styles.imageContainer}>
            <Image style={styles.imageArtikelLeft} source={{ uri: item.cover }} />
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.itemTitle}>{item.title}</Text>
          </View>
        </View>
      )}
      ListEmptyComponent={() => isLoading && <ActivityIndicator />}
    />
  </View>
);