Flatlist 里面进入 Scrollview答案

【问题标题】：Flatlist inside into ScrollviewFlatlist 里面进入 Scrollview
【发布时间】：2021-05-07 18:24:12
【问题描述】：

我尝试在 ScrollView 中显示一些项目，但它显示了这个错误。

VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中相同的方向 - 使用另一个 VirtualizedList 支持的容器而是。

我尝试使用滚动视图，但我需要列表中的列。

    return (
      <View>        
        <ScrollView style={{backgroundColor: '#612d7c'}} >
          <View style={{marginTop: headerHeight}}>
            <ProfilePictureItem /> 
          </View>
          <View style={styles.badgeTextContainer}>
            <Text style={styles.badgeText}>Badges</Text>
          </View>
          <Card style={styles.card}>
            <FlatList
              data={products}
              style={{marginBottom: 20}}              
              renderItem={itemData => (
                <BadgeItem key={itemData.item.id} style={styles.badge}/>
              )}
              numColumns={3}              
            /> 
          </Card>        
        </ScrollView>        
      </View>
      );

【问题讨论】：

标签： react-native performance scrollview flatlist

【解决方案1】：

没错，如果使用相同的滚动方向，要么显示 ScrollView，要么显示 FlatList。例如，您可以将 FlatList 与 ListHeaderComponent 属性一起使用。

你可以试试这个：

function renderListHeader() {
    return (
        <View style={{marginTop: headerHeight}}>
            <ProfilePictureItem /> 
        </View>
        <View style={styles.badgeTextContainer}>
            <Text style={styles.badgeText}>Badges</Text>
        </View>
    )
}

.....

return (
    <FlatList
        data={products}
        ListHeaderComponent={renderListHeader()}
        style={{marginBottom: 20}}              
        renderItem={itemData => (
            <BadgeItem key={itemData.item.id} style={styles.badge}/>
        )}
        numColumns={3}              
    /> 
  );

【讨论】：