React Native FlatList 刷新不起作用答案

【问题标题】：React Native FlatList refreshing not workingReact Native FlatList 刷新不起作用
【发布时间】：2021-09-04 11:30:57
【问题描述】：

我遇到了关于拉动功能的刷新问题。 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 时，pull 刷新工作正常，但是我可以不再在 Flatlist 中滚动，一切都变得非常紧凑，所以风格也会随之改变。有谁知道为什么会这样？

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

【问题讨论】：

尝试使用 flexgrow 代替 flex
@The1993 flexGrow 对我不起作用，它最终与图 2 相同，所以一切看起来都很正常，但拉动时刷新不起作用。
@The1993 我有一个更新，flexgrow 正在工作，但只有当我创建一个新项目时。我尝试了所有方法，但没有解决方案有效，我该如何检查我的项目是否损坏以及我该怎么办？
老实说，很难说您当前的项目出了什么问题。也许检查拼写错误或比较两个项目文件并查看差异。
@The1993 天哪，我哭了，我发现了错误，它很简单，我是如何转储的 :D 感谢您提供比较两个项目的提示，我在那里做了，发现了最垃圾的错误做过。导入错误，我从 react-native-gesture-handler 导入 Flatlist，而不是从 react-native。为了这个小东西，我工作了 5 天：D

标签： javascript reactjs react-native refresh flatlist

【解决方案1】：

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

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

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

但它需要从 React-Native 导入，如下所示：

import { FlatList } from "react-native";

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

【讨论】：

感谢您发布您的问题和答案。我有完全相同的错误导入导致相同的行为。 ?
这里也一样。谢谢。为我节省了很多挫败感:)

【解决方案2】：

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

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

你可以替换style={{flex: 1}}而不是contentContainerStyle或者用flex: 1包裹父元素

【讨论】：

我也试过这个，但没有任何反应。 FlatList 工作正常，但与之前一样，pull 刷新功能不起作用。