React-Native:FlatList onRefresh没有调用pull up.

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

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

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

代替

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

尝试这个

import { FlatList } from 'react-native';

Answer 2

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

Answer 3

评论以来，这在Google必应搜索中排名很高。

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

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

我真正想要的是：

import { FlatList } from 'react-native';

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