Faites défiler vers le bas de la ScrollView à Réagir Natif

Je voudrais trouver un moyen de faire défiler vers le bas d'un scrollView. Je suis conscient de la scrollTo méthode après avoir regardé le code source pour le ScrollView, cependant je n'arrive pas à trouver une façon de mesurer la taille du contenu de la scrollView.

Après avoir fait le tour, je suis tombé sur cette github question qui mentionne à regarder comment "UIManager.measureX méthodes sont utilisées pour mesurer la taille du contenu. Cependant, après avoir cherché plusieurs fois à travers le code source, je ne peux pas tout à fait l'air de trouver où ces méthodes sont utilisées.

Ce que quelqu'un serait capable de me pointer dans la bonne direction?

OriginalL'auteur coldbuffet | 2015-10-10

react-native

14

C'était assez consealed et j'ai couru dans le code source.

Vous pouvez essayer comme ceci:

besoin:
```
var RCTUIManager = require('NativeModules').UIManager;
```
rendu:
```
<ScrollView ref = {component=>{this._scrollView=component;}}>
</ScrollView>
```
événement:
```
someEvent: function() {
  RCTUIManager.measure(this._scrollView.getInnerViewNode(), (...data)=>{console.log(data)});
}
```
De données, vous pouvez obtenir le contentsize de la scrollview dont la hauteur est le quatrième élément de data. Bien sûr, vous pouvez obtenir le contenu de décalage. Exécuter dans le code source de RCTUIMananger.m pour plus de détails.

Lorsque vous utilisez getInnerViewNode vous pouvez obtenir le cadre de la ScrollView du point de vue interne du cadre. Si vous voulez obtenir le ScrollView de l'image, vous devez utiliser React.findNodeHandle(this._scrollView), et le ScrollView du cadre n'est pas toujours égal à son point de vue interne du cadre.

(mise à jour)

Si vous souhaitez remplacer (...data)=>{console.log(data)} avec callback, vous devriez l'utiliser comme ceci:
```
RCTUIManager.measure(this._scrollView.getInnerViewNode(), callback.bind(this));
```
Merci pour la réponse. J'ai essayé ce que vous avez dit, mais les données de paramètre revient toujours à 0 (zéro), plutôt qu'un objet (ou un tableau). Des idées? Je crois que j'ai trouvé le code source vous parlez (github.com/facebook/react-native/blob/master/React/Modules/...). Le premier paramètre de mesure semble être une reactTag mais je ne suis pas entièrement sûr de ce que la balise se réfère.
Désolé, oubliez les .... J'avais mis à jour ma réponse. Utilisation (...data) à la place.
Ok merci pour ça, maintenant je suis en mesure de recevoir le scollView de la taille du contenu de la hauteur, cependant il semble y avoir un autre problème. Tout le temps je me réfère à 'cette' à l'intérieur de la fonction de rappel pour l'RCTUIManager.mesure, j'obtiens une erreur nulle. Ce qui se passe si je l'appelle._scrollView ou cette.someOtherMethod. Suis-je en train de faire quelque chose de mal?
Où est votre rappel? Vous avait ajouté le ref à la ScrollView?
Oui réf a été ajouté pour faire défiler la vue que je suis de la scrollview contenu de la hauteur. Le rappel ressemble à ceci: RCTUIManager.mesure(ce._scrollView.getInnerViewNode(), (...données)=>{ console.log(data); ce._scrollView.scrollTo(0, 0); //erreur ici }); Cependant, après avoir joué un petit peu, j'ai trouvé que cela: RCTUIManager.mesure(ce._scrollView.getInnerViewNode(), cette.someMethodUsingThisKeyword); ne pas jeter une erreur nulle. Ma conjecture est que lors de l'utilisation de la fonction anonyme, je n'ai pas de référence à "ceci"? Pourriez-vous expliquer ce comportement? Merci pour votre aide!!

OriginalL'auteur KChen
2

Yo pouvez utiliser scrollToEnd() méthode de la ScrollView:

https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend

Selon la documentation:
Si c'est une verticale de la ScrollView défile vers le bas. Si c'est une horizontale ScrollView défile vers la droite.

OriginalL'auteur anivaler
1

Tout RCTUIManager.measure() fonctionne par extraction de la 4ème élément du tableau de données via de référence, il est beaucoup plus approprié ( et plus facile ) d'utiliser les éléments suivants lorsque vous travaillez avec des ScrollViews:

RE: https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange
```
onContentSizeChange={( contentWidth, contentHeight ) => {
    this._contentHeight = contentHeight
}}
```
Cet événement se déclenche une fois que l'enfant intérieur, les composants de finition de la pose et de changement. Ce qui fonctionne pour moi et je recommande cette approche prise en charge lors de la détermination du contenu de limites.

OriginalL'auteur sean2078
1

Il y a une meilleure façon de le faire. À grands traits:

Utiliser un ListView pour rendre le chat.
```
<ListView
  ref="list"
  ...
```
Ajouter un pied de page à la liste avec renderFooter qui utilise onLayout pour sauver son y position. Le pied de page n'ont pas à tout rendre visible, juste un vide View. Tous que vous cherchez est là que le bas de la liste.
```
renderFooter={() => {
  return <View onLayout={(e)=> {
    this.footerY = e.nativeEvent.layout.y;
  }}/>
}},
```
Ajouter un onLayout gestionnaire à l' ListView lui-même qui sauve les listes height.
```
onLayout={(e)=>{
  this.listHeight = e.nativeEvent.layout.height;
}}
```
Avec ces deux informations, vous pouvez défiler vers le bas de la liste avec quelque chose comme:
```
if (this.listHeight && this.footerY && this.footerY > this.listHeight) {
  var scrollDistance = this.listHeight - this.footerY;
  var scrollResponder = this.refs.list.getScrollResponder();
  scrollResponder.scrollWithoutAnimationTo(-scrollDistance);
}
```
Combien de fois vous faites défiler vers le bas est à vous et dépend du comportement que vous voulez.

Un exemple de cette action est GiftedMessenger.

OriginalL'auteur nicholas

Vous devez vous connecter pour publier un commentaire.