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

Question

当前行为：

我正在尝试通过向上拉视图来更新从服务器获取的列表。当我这样做时，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>
    )
  }

版本信息

React-Native：0.45.0

节点：7.4.0

Answer 1

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

Answer 2

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

这是该示例的片段：

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>
    )

Answer 3

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

在我的例子中，自动导入了另一个 FlatList，但它的行为并不完全符合我的要求（它似乎没有 "onRefresh"）：

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

我真正想要的是：

import { FlatList } from 'react-native';

现在调查为什么我们有这种依赖性。 ;)

Answer 4

您可能将 RefreshControl 用作 ScrollView 中的道具： Example and Guide

Answer 5

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

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

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

...

Answer 6

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

因此需要更改 Flatlist 组件的 react-native。

Answer 7

请确保 flatlist 没有嵌套在 scrollview 中， discussed here

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

React-Native: FlatList onRefresh not called on pull up.

react-native

react-native-flatlist