17

当前行为：

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

4

7 回答 7

42

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

在我的情况下，另一个 FlatList 的自动导入并不完全符合我的要求（它似乎没有“onRefresh”）：

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

我真正想要的：

import { FlatList } from 'react-native';

现在来研究为什么我们有这种依赖关系。;)

于 2019-01-16T15:01:23.680 回答
8

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

于 2017-06-28T20:19:48.693 回答
6

我遇到过这个问题。有时会在自动完成代码中IDE选择错误的组件。考虑平面列表。不支持。的只支持。FlatlistIDEreact-native-gesture-handlerreact-native-gesture-handlerFlatlistonRefreshreact-nativeFlatlistonRefresh

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

于 2020-08-25T15:45:20.387 回答
2

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

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

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

...

于 2019-11-06T13:39:44.083 回答
0

请确保 flatlist 没有嵌套在滚动视图中， 这里讨论

于 2022-02-14T14:10:04.343 回答
0

您可能正在使用 RefreshControl 作为 ScrollView 中的道具： 示例和指南

于 2019-11-03T11:58:29.057 回答
-2

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

这是该示例的一个片段：

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>
    )
于 2018-06-13T14:03:37.840 回答