Für eine Chat-ähnliche App möchte ich eine ScrollView
Komponente nach unten scrollen lassen, da die neuesten Nachrichten unter den älteren angezeigt werden. Können wir die Bildlaufposition von a anpassen ScrollView
?
react-native
Stirman
quelle
quelle
Antworten:
Für React Native 0.41 und höher können Sie dies mit der integrierten
scrollToEnd
Methode tun :quelle
root
sonst verwenden, scrollToEnd ist undefiniert. dhthis.scrollView.root.scrollToEnd
root
tatsächlich einen undefinierten Fehler aus.ref={ref => {this.scrollView = ref}}
da Sie die Aufgabe nicht zurückgeben möchtenVerwenden Sie onContentSizeChange, um das untere Y der Bildlaufansicht (Höhe) zu verfolgen.
https://facebook.github.io/react-native/docs/scrollview.html#oncontentsizechange
Verwenden Sie dann den Referenznamen der Bildlaufansicht wie
quelle
Hier ist die einfachste Lösung, die ich aufbringen könnte:
quelle
Für alle, die Funktionskomponenten schreiben, die Hook verwenden können,
quelle
Versuchen Sie diese Lösung
xcode 10.0
RN: 56.0.0
quelle
ref=
? scheint wie ein Web-Sie können die Bildlauf- / Listenansicht mithilfe des
react-native-invertible-scroll-view
Moduls umkehren und dann einfach aufrufen,ref.scrollTo(0)
um nach unten zu scrollen.Installieren Sie das Modul:
Importieren Sie dann die Komponente:
Verwenden Sie dann die folgende JSX anstelle von
ScrollView
:Dies funktioniert, weil
react-native-invertible-scroll-view
der gesamte Inhalt der Ansicht umgedreht wird. Beachten Sie, dass die untergeordneten Elemente der Ansicht auch in der entgegengesetzten Reihenfolge zu einer normalen Ansicht gerendert werden. Das erste untergeordnete Element wird unten angezeigt .quelle
Für den Fall, dass sich jemand im Jahr 2020 oder später fragt, wie dies mit Funktionskomponenten erreicht werden kann. So habe ich es gemacht:
quelle
Eigentlich hat die Antwort von @Aniruddha bei mir nicht funktioniert, weil ich sie benutze
"react-native": "0.59.8"
undthis.scrollView.root.scrollToEnd
auch undefiniert binaber ich habe es herausgefunden und das funktioniert
this.scrollView.scrollResponderScrollToEnd({animated: true});
Wenn Sie
0.59.8
dies verwenden, funktioniert dies ODER wenn Sie eine spätere Version verwenden und dies für Sie funktioniert. Bitte fügen Sie Versionen in diese Antwort ein, damit andere keine Probleme bekommen.Vollständiger Code hier
quelle
Diese Methode ist ein bisschen hacky, aber ich konnte keinen besseren Weg finden
quelle
scrollToBottom
solche Ansätze in neueren Versionen von React Native überholt.Dies beantwortet Ihre Frage: https://stackoverflow.com/a/39563100/1917250
Sie müssen ständig zum Ende der Seite scrollen, indem Sie die Höhe des Inhalts abzüglich der Höhe der scrollView berechnen.
quelle
Wenn Sie TypeScript verwenden, müssen Sie dies tun
quelle
Ich habe eine Weile damit gekämpft und mir schließlich etwas ausgedacht, das für mich wirklich gut und reibungslos funktioniert hat. Wie viele habe ich erfolglos versucht
.scrollToEnd
. Die Lösung, die für mich funktionierte, war eine Kombination ausonContentSizeChange
:onLayout
Requisiten und ein bisschen mehr denken visuell über „was auf den Boden Scrollen“ wirklich bedeutete. Der letzte Teil scheint mir jetzt trivial, aber ich habe ewig gebraucht, um es herauszufinden.Da das
ScrollView
eine feste Höhe hat, berechnete ich den Versatz, wenn die Inhaltshöhe über die Höhe des Containers geht, indem ich dieprevHeight
(feste Höhe desScrollView
) für diecurrHeight
(die Inhaltshöhe) subtrahiere . Wenn Sie es sich visuell vorstellen können, schieben Sie beim Scrollen zu diesem Unterschied in der y-Achse die Inhaltshöhe um diesen Versatz über den Container. Ich habe meinen Versatz erhöht und meine jetzt aktuelle Inhaltshöhe zu meiner vorherigen Höhe gemacht und einen neuen Versatz berechnet.Hier ist der Code. Hoffe es hilft jemandem.
quelle
Ich denke, es ist zu spät, um zu antworten, aber ich habe einen Hack! Wenn Sie verwenden
FlatList
Sie aktiviereninverted
Eigenschaft , die zur Einstellung fällt zurücktransform scale
auf-1
(die für andere Liste Komponenten wie akzeptabel istScrollView
...). Wenn Sie IhreFlatList
Daten rendern, werden diese immer ganz unten angezeigt!quelle
Versuchen Sie, die contentOffset- Eigenschaft der Bildlaufansicht auf die aktuelle Höhe des Inhalts festzulegen .
Um das zu erreichen, was Sie benötigen, können Sie dies im Rahmen des onScroll-Ereignisses tun. Dies kann jedoch zu einer schlechten Benutzererfahrung führen, sodass es sich als benutzerfreundlicher erweisen kann, dies nur zu tun, wenn eine neue Nachricht angehängt wird.
quelle
ScrollView
nach unten gescrollt wird, anstatt nur nach unten zu scrollen.Ich hatte ein ähnliches Problem, aber nachdem ich diese Seite gelesen habe (was mir Kopfschmerzen bereitet !), Finde ich dieses sehr schöne npm-Paket, das einfach die ListView invertiert und alles für eine Chat-Anwendung einfach macht !!
quelle
ScrollView
bezieht sich auf eine , nicht auf "ListView").Ein bisschen spät ... aber sieh dir diese Frage an. Scrollen Sie zum Anfang von ScrollView
ScrollView verfügt über eine "scrollTo" -Methode.
quelle