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

Question

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

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

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

那么如何在不为 FlatList 制作页眉/页脚组件的情况下解决这个问题呢？

Demo "注意:我在 expo 中没有收到警告，我也没有使用它，这只是一个示例，可以看到现场演示"

这里是代码片段

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 中使用 scrollView 而不是 flatList？ 当您在 scrollView 中使用 scrollView 时，它似乎会自动启用嵌套滚动，您也可以添加 nestedScrollEnabled。