4
votes

La fonction React Native ScrollView scrollTo ne fonctionne pas

J'essaye de faire défiler vers le haut, si une certaine condition est remplie, dans l'événement componentWillReceiveProps du composant ... mais rien ne se passe:

render () {
   return (
      <ScrollView
        ref={this.scrollViewRef}
        contentContainerStyle={{ marginVertical: 8 }}
      >
    ...
    )
}

Extrait de code de la façon dont j'ai créé la référence pour le scrollView:

class SearchResult extends React.Component {
  constructor(props) {
    super(props);

    this.scrollViewRef = React.createRef();
  }
//...
}

componentWillReceiveProps(nextProps) {
     // some code...

    if (newQuery === query && this.scrollViewRef.current) {
      console.log('Should scroll to top'); // << logs successfully

      this.scrollViewRef.current.scrollTo({
        x: 0,
        y: 0,
        duration: 500,
        animated: true,
      });
    }
  }

J'ai aussi essayé de faire défiler manuellement en appuyant sur un bouton ... ne fonctionne pas aussi bien

Avez-vous de l'aide?

reactjs react-native

12 commentaires

Y a-t-il un message d'erreur?

rien du tout ... J'ai connecté this.scrollViewRef.current , et la fonction scrollTo était là

Avez-vous essayé this.scrollViewRef.getNode (). ScrollTo () ?

malheureusement, il a donné cette erreur: this.scrollVieeRef.getNode n'est pas une fonction ...

Ouais pouvez-vous montrer comment vous faites l'arbitre?

exactement comme dans la documentation ici reactjs.org/docs/refs-and-the- dom.html

Pouvez-vous poster le code pertinent s'il vous plaît?

certainement ... consultez la modification s'il vous plaît ...

Essayez de faire la référence dans l'autre sens: ref = {(_) => this.ref = _} puis essayez le .getNode () comme ci-dessus.

@Colin merci beaucoup en effet ... j'ai essayé le second format de faire une ref ... mais je suis retourné au 'mode silence' ... pas d'avertissement ... des erreurs ... comme si je n'avais rien fait

@Colin ... consultez ma réponse ... le problème était dans le conteneur ... merci pour toutes vos suggestions quand même

Ah intéressant, content que vous l'ayez résolu.

3 Réponses :

0
votes

Les documents React Native disent:

Remarque: L'étrange signature de la fonction est due au fait que, pour des raisons historiques, la fonction accepte également des arguments séparés comme alternative à l'objet options. Ceci est obsolète en raison de l'ambiguïté (y avant x) et NE DEVRAIT PAS ÊTRE UTILISÉ.

Essayez peut-être la méthode scrollToOffset , si vous utilisez également FlatList avec ScrollView?

3 commentaires

Merci mais ceci est un avertissement de ne pas utiliser l'ancienne signature de scrollTo (x, y, animation) ... nous devrions utiliser scollTo ({x: 5, y: 5, animated: true}) ... et c'est ce que je en utilisant actuellement .... et le code dans ma question ne jette aucune erreur ni même un avertissement

Je vois. Avez-vous vérifié cette question pour voir si cela est similaire?

oui j'ai fait mes propres recherches avant de poster ... et je suis tombé sur ce post stackoverflow ... j'ai tout essayé ... ça n'a pas fonctionné aussi bien ... mais merci quand même

3
votes

J'ai compris ça ...

Le scrollView fonctionnait parfaitement dans un env isolé (un tout nouveau projet) ...

Je pensais que le problème pouvait être dans le conteneur de ce scrollview ... et j'ai trouvé que le composant parent a également un ScrollView ... une fois que je l'ai supprimé, tout fonctionnait parfaitement.

0 commentaires

0
votes

Pour les personnes qui utilisent la méthode useRef () et obtiennent une erreur 'xRef.scrollTo' n'est pas une fonction , essayez de l'utiliser comme xRef.current .scrollTo ({[YOUR_PARAMS]}) .

Je ne savais pas ce truc actuel et je devenais fou.

0 commentaires