React Native FlatList 刷新不起作用

Question

拉动刷新功能出现问题。 FlatList 呈现良好，但拉动刷新不起作用。这是我当前的源代码：

return (
   <View style={GlobalStyles.flex1}>
       <FlatList
           showsVerticalScrollIndicator={false}
           refreshControl={
               <RefreshControl
                   refreshing={isRefreshing}
                   onRefresh={() => {
                       console.log("onRefresh loadVocable");
                       loadVocables();
                   }}
               />
           }
           data={vocables}
           keyExtractor={vocable => vocable.id}
           onEndReached={() => {
               if (!isRefreshing && !endReached) {
                   loadVocables();
               }
           }}
           renderItem={vocable => (
               <TouchableOpacity
                   onPress={() => {
                       props.navigation.navigate({ routeName: "editVocable", params: { vocable: vocable.item } });
                   }}
                   onLongPress={() => {
                       handleLongPress(vocable.item.id);
                   }}>
                   <Card style={styles.cardStyle}>
                       <View style={styles.part1}>
                           <Text style={styles.vocableText}>{vocable.item.wordENG}</Text>
                           <Text style={styles.vocableText}>{vocable.item.wordDE}</Text>
                       </View>
                       <View style={styles.part2}>
                           <Ionicons name={vocable.item.known ? "md-checkmark-circle" : "md-close-circle"} size={23} color={vocable.item.known ? Colors.success : Colors.danger} />
                       </View>
                   </Card>
               </TouchableOpacity>
           )}
       />
   </View>
);

在 official docs 中有一个例子说 contentContainerStyle 需要是 flex: 1 才能知道高度，这对我来说很有意义，所以当我将 contentContainerStyle 设置为 flex 1 时，拉动时刷新效果很好，但后来我不能再在 Flatlist 中滚动，一切都变得非常紧凑，所以风格也随之改变。有谁知道为什么会这样？

第一张图片有“contentContainerStyle={{flex: 1}}”，最后一张没有contentContainerStyle。

Answer 1

contentContainerStyle 用于设置内部内容的样式，例如项目对齐、填充等

样式用于对齐其高度和关系

您可以替换 style={{flex: 1}} 而不是 contentContainerStyle 或用 flex: 1

包裹父元素

Answer 2

答案很简单，我将一个新项目（有我的代码）与问题所在的项目进行了比较，5 天后我发现了一个小错误：

我导入错误！我这样导入 FlatList：

import { FlatList } from "react-native-gesture-handler";

但它需要从 React-Native 中导入，就像这样：

import { FlatList } from "react-native";

感谢@The1993，如果没有比较项目的提示，也许我会永远停留在这个错误上:D 以后我会比较工作文件以找出任何错误！

React Native FlatList 刷新不起作用

React Native FlatList refreshing not working

javascript

reactjs

react-native

refresh

flatlist