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

Posted 2023-02-16

【中文标题】React-Native：上拉时未调用 FlatList onRefresh。

【英文标题】：React-Native: FlatList onRefresh not called on pull up.

【发布时间】：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 是 Fl​​atList 的一个属性。不知道你会如何渲染。

这很好，但我认为onRefresh 不会在您认为它会被调用时被调用。在函数式编程中，例如带有 React+Redux 的 JS6，您不会更改状态，而是创建一个新状态。您的状态树没有改变，因此没有创建新的状态。

尝试在控制台刷新一些东西，我想你会发现它永远不会在你当前的代码中被击中。

【参考方案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>
    )