web-dev-qa-db-fra.com

React-Native: FlatList onRefresh n'est pas appelé au pull up.

Comportement actuel:

J'essaie de mettre à jour une liste obtenue d'un serveur en tirant sur la vue. Quand je fais, onRefresh ne se déclenche pas.

J'ai défini la demande GET dans le rappel de la fonction setState, mais cela ne semble rien faire.

Comportement attendu:

Tirer sur la vue appelle la fonction onRefresh.

Code:

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

Informations sur la version

React-Native: 0.45.0

Noeud: 7.4.0

react-nativereact-native-flatlist
11
dmr07

Problème avec React-Native. FlatList ne semble pas détecter onRefresh lorsqu'il est imbriqué dans ScrollView: Issue ticket: https://github.com/facebook/react-native/issues/14756

5
dmr07

Commentant depuis que ce rang élevé sur google bing pour ma recherche.

Dans mon cas, il y avait une importation automatique d'un autre FlatList qui ne se comportait pas exactement comme je le voulais (il ne semblait pas y avoir de "onRefresh"):

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

Ce que je voulais vraiment:

import { FlatList } from 'react-native';

Maintenant pour rechercher pourquoi nous avons cette dépendance. ;)

6
honeyp0t

J'ai aussi rencontré ça. Résolu de mon côté en faisant le

importer {StyleSheet, RefreshControl} à partir de 'react-native';

...

ajouter ci-dessous le code dans le composant parent qui serait o

refreshControl = {

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

        }

...

1
anoNewb

Vous utilisez peut-être RefreshControl comme accessoire dans ScrollView: exemple et guide

0
mohsen gharivand

J'ai également eu ce problème pendant un certain temps. J'ai trouvé la solution sur this expo example.

Voici un extrait de cet exemple:

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
Waweru wa Kamau