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

问题描述

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

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

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

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

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

这里的代码片段

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

标签： javascriptreactjsreact-native

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

问题描述

解决方案

推荐阅读