flatlist 和 scrollView 无法正常工作

Question

我是 react-native 的新手。在我的一个屏幕上，我在 4 个地方使用了 flatlist，但最后一个显示在屏幕底部的 flatlist 没有滚动，所以我添加了 scrollView，然后它工作正常，但向我显示了那个错误

VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList-backed 容器。

代码

  const Header = () => {
    return (
      <View>
      
        <SafeAreaView>
          <View style={styles.sellersheaderWrapper}>
            <View style={styles.sellersheaderTitle}>
              <Text style={styles.sellersheaderTitleText}>
                Featured Sellers
              </Text>
            </View>
            <View>
             {
                 isFeatureSeller == '' ?
                 <View style={[styles.noSpecialOfferCard, {paddingVertical:hp('2%')}]} >
                     <Text style={[styles.noSpecialOfferCardText, {fontSize:hp('2%')}]}>Currently, No Feature Sellers</Text>
                 </View>
                 :
                 <View>
                <FlatList
                  data={isFeatureSeller}
                  renderItem={renderCategoryItem}
                  keyExtractor={item => item.id}
                  horizontal={true}
                  showsHorizontalScrollIndicator={false}
                />
              </View>
             }
            </View>
          </View>
        </SafeAreaView>
        <View style={styles.searchWrapper}>
          <View style={styles.dobregisterFormWrapperText}>
            <TextInput
              style={styles.dobregisterInputStyleText}
              value={search}
              onChangeText={(text) => searchFilterFunction(text)}
              onClear={(text) => searchFilterFunction('')}
              placeholder="Search ..."
            />
            <View>
              <SearchIconSvg />
            </View>
          </View>
        </View>
      </View>
    );
  };
  const Footer = () => {
    return (
      <View>
        <View style={styles.specialOfferCardWrapper}>
          <View style={styles.specialOfferCardTextWrapper}>
            <Text style={styles.specialOfferCardText}>Special Offer Cards</Text>
          </View>
          {isSpecialCards == '' ? (
            <View style={styles.noSpecialOfferCard}>
              <Text style={styles.noSpecialOfferCardText}>
                No Special Offer cards
              </Text>
            </View>
          ) : (
            <FlatList
              data={isSpecialCards}
              renderItem={renderCards}
              keyExtractor={(item, index) => index.toString()}
              horizontal={true}
              showsHorizontalScrollIndicator={false}
              style={styles.specialCards}
            />
          )}
          <View
            style={[
              styles.specialOfferCardTextWrapper,
              {paddingBottom:  isFeatureSeller == '' ? hp('17%')  :hp('10%') },
            ]}>
            <Text style={styles.specialOfferCardText}>Cards</Text>
            <FlatList
              data={isCard}
              renderItem={renderNormalCards}
              keyExtractor={item => item.id}
              showsVerticalScrollIndicator={false}
              scrollEnable={true}
            
            />
          </View>
        </View>
      </View>
    );
  };

  const MainData = () => {
    return(
      <View>
              {search == '' ? (
        <ScrollView>
        <View >
            <Header />
            <Footer />
        </View>
        </ScrollView>
      ) : (
        <View >
          <FlatList
            data={filteredDataSource}
            renderItem={renderCategoryItemSearch}
            keyExtractor={(item, index) => index.toString()}
            ListHeaderComponent={Header}
          />
        </View>
      )}
      </View>
    )
  }
  return (
    <View style={styles.container}>

      {
        loading == true ?
        <View style={{marginVertical:hp('45%')}} >
            <ActivityIndicator size="large" color={colors.primary}  /> 
        </View>
        :
        
          <MainData/>
        
      }
      <View style={styles.bottomNavWrapper}>
        <TouchableOpacity
          style={styles.storeWrapper}
          onPress={() => navigation.navigate('BuyerDashboard')}>
          <View style={styles.storeIcon}>
            <DashboardReverseSvg />
          </View>
        </TouchableOpacity>
        <View style={styles.dashboardWrapper}>
          <View style={styles.dashboardIcon}>
            <BuyerStoreReverseSvg />
          </View>
          <View style={styles.dashboardText}>
            <Text style={styles.dashboardTextfont}>Storefront</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Store;

我想在这里滚动。

 <ScrollView>
        <View >
            <Header />
            <Footer />
        </View>
        </ScrollView>

Answer 1

您可以在 FlatList 组件上使用 nestedScrollEnabled 属性

https://reactnative.dev/docs/scrollview#nestedscrollenabled