Flatlist 进入 Scrollview

Question

我尝试在 ScrollView 中显示一些项目，但它向我显示此错误。

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

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

    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>
      );

Answer 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}              
    /> 
  );

Flatlist 进入 Scrollview

Flatlist inside into Scrollview

react-native

performance

scrollview

flatlist