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

评论，因为它在 ~~google~~ 必应搜索中排名很高。

在我的情况下，自动导入了另一个FlatList，它的行为与我想要的不完全一样（它似乎没有“ onRefresh”）：

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

我真正想要的是

import { FlatList } from 'react-native';

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

Answer 3

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

这是该示例的片段：

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 4

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

Answer 5

我也遇到了这个。通过使

解决了这一问题

从“ react-native”导入{StyleSheet，RefreshControl};

...

在父组件的以下代码中添加或

refreshControl = {

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

        }

...

Answer 6

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

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

React-Native：FlatList onRefresh没有调用pull up。

6 个答案: