React-Native：上拉时未调用 FlatList onRefresh。答案

【问题标题】：React-Native: FlatList onRefresh not called on pull up.React-Native：上拉时未调用 FlatList onRefresh。
【发布时间】：2017-11-30 23:14:22
【问题描述】：

当前行为：

我正在尝试通过拉起视图来更新从服务器获取的列表。当我这样做时，onRefresh 不会触发。

我在 setState 函数的回调中设置了 GET 请求，但这似乎没有任何作用。

预期行为：

上拉视图调用 onRefresh 函数。

代码：

...
  constructor(props) {
    super(props);
    this.state = {
      stories: [],
      isFetching: false,
    };
  }
  componentDidMount() { this.fetchData() }
  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }
  fetchData() {
    var that = this;
    axios.get('http://192.168.0.13:3000/api/story/get/by/geo')
      .then((res) => {
        that.setState({ stories: res.data, isFetching: false });
        that.props.dispatch(StoryActions.setStories(res.data))
      })
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
  }

版本信息

反应原生：0.45.0

节点：7.4.0

【问题讨论】：

我认为onRefresh 是错误的放置位置。为什么不把它贴在render() 中呢？也许我误解了，但在我看来，使用这样的刷新功能有点违背功能代码的全部目的......
根据文档 (facebook.github.io/react-native/docs/flatlist.html) onRefresh 是 FlatList 的一个属性。不知道你会如何渲染。
这很好，但我认为onRefresh 不会在您认为它会被调用时被调用。在函数式编程中，例如带有 React+Redux 的 JS6，您不会更改状态，而是创建一个新状态。您的状态树没有改变，因此没有创建新的状态。
尝试在控制台刷新一些东西，我想你会发现它永远不会在你当前的代码中被击中。

标签： react-native react-native-flatlist

【解决方案1】：

评论因为这在我的搜索中在 ~~google~~ bing 上排名很高。

在我的例子中，另一个 FlatList 的行为与我想要的不完全一致（它似乎没有“onRefresh”）：

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

我真正想要的：

import { FlatList } from 'react-native';

现在来调查我们为什么会有这种依赖关系。 ;)

【讨论】：

这是 VSCode 为我生成的导入；我看的不够仔细，浪费了大约 15 分钟的时间去追逐它，直到我找到了这个。谢谢你的回答！
啊。同样在这里！谢谢
值得注意的是import { FlatList } from 'react-native-gesture-handler'; 将在iOS 上工作，但在Android 上无效
无法告诉您我遇到了多少次错误并发现这是因为我从“react-native-gesture-handler”自动导入。感谢您的回答！

【解决方案2】：

React-Native 的问题。嵌套在 ScrollView 中时，FlatList 似乎没有检测到 onRefresh：问题票：https://github.com/facebook/react-native/issues/14756

【讨论】：

【解决方案3】：

我遇到过这个问题。有时IDE 在自动完成代码中选择错误的Flatlist 组件。 IDE 考虑 react-native-gesture-handler 的 Flatlist。不支持Flatlist 中的react-native-gesture-handler onRefresh。 react-native 的Flatlist 只支持onRefresh。

所以需要更改react-native 的Flatlist 组件。

【讨论】：

【解决方案4】：

我也遇到了同样的问题。通过将 refreshControl 属性添加到 Flatlist 的父组件（即 Content 或 Scrollview） 来解决它，如下所示：

import { StyleSheet, RefreshControl } from 'react-native';

 refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={() => this.handleRefresh()}
          />
        }

...

【讨论】：

【解决方案5】：

您可能正在使用 RefreshControl 作为 ScrollView 中的道具： Example and Guide

【讨论】：

点评来源：嗨，虽然链接是分享知识的好方法，但如果它们将来被破坏，它们将不会真正回答问题。将回答问题的链接的基本内容添加到您的答案中。如果内容太复杂或太大而无法在此处放置，请描述所提出解决方案的总体思路。请记住始终保留对原始解决方案网站的链接引用。见：How do I write a good answer?

【解决方案6】：

这个问题我也有一段时间了。我在this expo 示例中找到了解决方案。

这是该示例的 sn-p：

return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )

【讨论】：