Question

在主屏幕中，我有3个FlatList和其他一些View的“其他数据”，因此，我应该将其包装在ScrollView中，使我可以滚动查看其他数据，等等，

但是当我用scrollView包装FlatList时，我得到了这个警告

VirtualizedLists绝对不能嵌套在带有以下内容的纯ScrollView中相同的方向-使用另一个支持VirtualizedList的容器代替。

那么如何在不为FlatList创建页眉/页脚组件的情况下解决此问题？

Demo“注意：博览会没有收到警告，我也没有使用它，这只是观看实时演示的一个示例”

此处是代码段

const HomeScreen = () => {
  const renderServices = ({item, index}) => {
    return (
      <View style={styles.itemContainer}>
        <View style={styles.serviceImgContainer}>
          <Image
            style={styles.serviceImg}
            source={{
              uri:
                'https://cdn1.iconfinder.com/data/icons/appliance-1/100/dryer-03-512.png',
            }}
          />
        </View>
        <Text>{item.name}</Text>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView style={{flex: 1}}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>
             Booking Now!
          </Text>
          <View style={styles.imgHeaderContainer} />
        </View>
        {/* Services */}
        <View style={styles.servicesContainer}>
          <View style={styles.servicesHeader}>
            <Text style={styles.headerTitle}>Services</Text>
            <TouchableOpacity>
              <Text style={styles.headerTitle}>more</Text>
            </TouchableOpacity>
          </View>
          <FlatList
            scrollEnabled={false}
            data={[
              {id: 0, name: 'service 0', img: 'img.jpg'},
              {id: 1, name: 'service 1', img: 'img.jpg'},
              {id: 2, name: 'service 2', img: 'img.jpg'},
              {id: 3, name: 'service 3', img: 'img.jpg'},
              {id: 4, name: 'service 4', img: 'img.jpg'},
              {id: 5, name: 'service 5', img: 'img.jpg'},
              {id: 6, name: 'service 6', img: 'img.jpg'},
              {id: 7, name: 'service 7', img: 'img.jpg'},
            ]}
            renderItem={renderServices}
            keyExtractor={(item) => item.id.toString()}
            numColumns={4}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            columnWrapperStyle={styles.columnWrapperStyle}
          />
        </View>

        {/* FlatList Services 2 */}
        <View style={styles.servicesContainer}>
          <View style={styles.servicesHeader}>
            <Text style={styles.headerTitle}>Services</Text>
            <TouchableOpacity>
              <Text style={styles.headerTitle}>more</Text>
            </TouchableOpacity>
          </View>
          <FlatList
            scrollEnabled={false}
            data={[
              {id: 0, name: 'service 0', img: 'img.jpg'},
              {id: 1, name: 'service 1', img: 'img.jpg'},
              {id: 2, name: 'service 2', img: 'img.jpg'},
              {id: 3, name: 'service 3', img: 'img.jpg'},
              {id: 4, name: 'service 4', img: 'img.jpg'},
              {id: 5, name: 'service 5', img: 'img.jpg'},
              {id: 6, name: 'service 6', img: 'img.jpg'},
              {id: 7, name: 'service 7', img: 'img.jpg'},
            ]}
            renderItem={renderServices}
            keyExtractor={(item) => item.id.toString()}
            numColumns={4}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            columnWrapperStyle={styles.columnWrapperStyle}
          />
        </View>

        {/* FlatList Services 3 .... */} 
            ....
        
        {/* other data */} 
            ....
      </ScrollView>
    </View>
  );
};

Answer 1

尝试在scrollview而不是flatList中使用scrollView吗？当您在scrollView中使用scrollView时，它似乎已自动为嵌套滚动启用，并且您也可以添加nestedScrollEnabled。

Answer 2

之所以需要滚动视图和平面列表是因为您想要在平面列表之前或之后呈现某些内容，但是平面列表的一项内置功能会执行相同的操作，并且您并未将其最大化，这就是为什么正在收到警告。它们分别称为List Header Component（在列表之前没有重复地呈现元素）和List Footer Component（在列表之后没有重复地呈现元素）

这里有个例子：

if (index === 0) {
            return (
                <View>
                <Text>The Team</Text>
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
                </View>
            )
        }
        return (
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
        )
    }

    if (this.props.leaders.isLoading) {
        return (
            <ScrollView>
                <History />
                    <Card title="Corporate Leadership">
                        <Loading />
                    </Card>
            </ScrollView>
        );
    }
    else if (this.props.leaders.errMess) {
        return (
            <ScrollView>
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                    <History />
                    <Card title="Corporate Leadership">
                        <Text>{this.props.leaders.errMess}</Text>
                    </Card>
                </Animatable.View>
            </ScrollView>
        )

    }
    else {
        return (
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                        <FlatList
                            ListHeaderComponent={
                                <History />
                            }
                            data={this.props.leaders.leaders}
                            renderItem={renderLeaders}
                            keyExtractor={item => item.id.toString()}
                            // ListFooterComponent={
                            //     <>

                            //     </>
                            // } 
                            />
                </Animatable.View>
        )
    }

}

}

如何将ScrollView与嵌套FlatList一起使用？

2 个答案: