2015-08-07 16 views
15

Gibt es eine Möglichkeit, als Reaktion auf einen Tastendruck zum Anfang eines ScrollView zu blättern?Zum Anfang von ScrollView scrollen

Ich kann eine re render der ganzen Seite zwingen, aber das scheint sehr ineffizient.

Antwort

16

Sie können die "scrollTo" -Methode der ScrollView ausführen. Schauen Sie sich die Quellen der Scroll Komponente https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L288

Sie können die Scrollview-Komponente, indem ref Eigenschaft erhalten Referenz und mit this.refs wie hier beschrieben: https://facebook.github.io/react/docs/more-about-refs.html

+0

Jarek, danke sehr. Das funktioniert sehr gut. Ich kann in den Dokumenten (https://facebook.github.io/react-native/docs/scrollview.html#content) keine Erwähnung von scrollTo finden, irgendwie nervig! –

+0

Ja. Die Dokumente sind ziemlich simpel (frühe Tage), aber ich gehe immer auf den Quellcode für reaktionsnative zurück, da er schön geschrieben und lesbar ist. –

+0

https://github.com/exponentjs/react-native-invertible-scroll-view ist ziemlich gut –

18
  1. zuerst ein ref Attribut zu Ihrer ScrollView Komponente hinzuzufügen. Beispiel: <ScrollView ref='_scrollView'>
  2. Dann, wo immer Sie wollen dieses Beispiel nach oben blättern tun: onPress={() => { this.refs._scrollView.scrollTo(0); }}
+1

Dies ist abgeschrieben, funktioniert aber immer noch ab sofort. – Brendan

+1

Irgendwie funktioniert nicht auf Android, weder dies noch die neue scrollTo (y ?: Nummer, Objekt, x ?: Nummer, animiert ?: Boolean). Irgendein Hinweis warum? –

15

Ein einfaches Beispiel:

<ListView 
    ref={ref => this.listView = ref} 
    onContentSizeChange={() => { 
    this.listView.scrollTo({y: 0}) 
    }} 
/> 
1

Mit einer Taste die scrollveiw oder Listenansicht nach oben zu steuern, möglich ist.

erste, Sie onScroll Methode setzen Ereignis in es verwenden könnte die event.nativeEvent.contentOffset.y des Listview oder Scroll zu erkennen, können Sie einen Zustand versetzt, um es zu kontrollieren s show or hide according to the y`.

Setzen Sie dann eine Schaltfläche auf Ihrer Seite, verwenden Sie onPress Methode und .scrollTo Methode, um es zu machen.

Hier ist eine Implementierung als Referenz verwendet werden kann: https://www.npmjs.com/package/react-native-scrolltotop

der Hoffnung, diese

2

scrollTo(x,y) ist veraltet hilft. Es ist jetzt am besten ein Objekt zu scrollTo wie dies passieren:

Sie

this.refs.scrollView.scrollTo({x: 0, y: 0, animated: true})

Verwandte Themen