HighLight / ScrollTo - ListView, ScrollView auf Reagieren-Native

Spiele ich ein bisschen mit reagieren,-Muttersprachler und ich stecken in einer Phase, wo ich kann ' T es herausfinden, indem ich. Ich habe eine Liste von posten, und ich würde gerne automatisch scrollen um einige Artikel.

Ich weiß, könnte ich die ScrollView und das contentOffset={{x:0,y:0}} und eingestellt und ausgeglichen, aber es wäre ein bisschen komplizierter, da würde ich brauchen, um zu verfolgen die position der einzelnen Elemente, Frage ich mich, ob es einen einfachen Weg, es zu tun, so dass ich sozusagen den Fokus auf eine bestimmte Zeile in der ListView.

Ist es so eine Sache zur Verfügung, die auf die libs?

  • Gute Frage, ich wäre daran interessiert zu hören, die Lösung, wie auch
  • Ich kam gerade über diese. Check it out und lassen Sie mich wissen, wenn es hilfreich ist, github.com/facebook/react-native/commit/...
  • Danke Chris für den Hinweis!
InformationsquelleAutor Gabriel Lopes | 2016-01-22
  1. 15

    Den ScrollView nicht bieten eine Methode zum navigieren zu einem bestimmten Punkt der Liste - aber es stellt die Methoden scrollTo({x, y, animated}).

    Wenn die Liste Elemente von gleicher Höhe, die Sie verwenden können, Sie zu implementieren scrollen, um einen bestimmten Artikel durch aufrufen scrollTo({y:itemIndex * ROW_HEIGHT}).

    Um der Lage sein, um Zugriff auf die ScrollView Instanz, die Sie benötigen, zu erfassen, was mit der ref Eigenschaft callback:

    <ScrollView ref={view => this._scrollView = view} />

    Und legen Sie die scroll-position an anderer Stelle mit:

    scrollToRow(itemIndex) {
  this._scrollView.scrollTo({y:itemIndex * ROW_HEIGHT});
}
    • Danke @jevakillio, ich werde es ausprobieren.
    • Aber was ist, wenn Ihre Zeilen mit variabler Höhe?
    • vielleicht können Sie facebook.github.io/reagieren-native/docs/..., um die position Messen, oder Messen die Höhen von allen vorherigen Zeilen, die Sie wollen auf dem Bildschirm und fügen Sie Sie. (Ich weiß, dieser Kommentar ist aus >1 Jahr her, aber diese zeigt im google)
    • Ich habe gerade herausgefunden, dass SectionList hat eine scrollToLocation erhält, dass der index der Sektion und Punkt. ListView nicht so ist, ich weiß nicht, warum. Vielleicht können Sie SectionList, mit nur einem Abschnitt und rendering als nichts, und dann verwenden Sie diese Methode. Es ist natürlich nicht sehr elegant, aber es wird wahrscheinlich besser funktionieren als alles andere für die Zeilen von variable Höhe (facebook.github.io/reagieren-native/docs/...)
    • facebook.github.io/reagieren-native/docs/scrollview#scrollto - Parameter geändert haben, aktualisiert Antwort
    • Für die horizontalen Elemente, die wir verwenden können, scrollToRow(itemIndex) { dieses._scrollView.scrollTo({x:itemIndex * ROW_HEIGHT}); }

    InformationsquelleAutor jevakallio
  2. 4

    Ich veröffentlicht habe reagieren-native-Blättern-in-Sicht, eine Bibliothek, die es ermöglichen, "scrollIntoView" - Funktion für Reagieren Nativen ScrollView.

    Für andere Listen wie SectionList Sie können immer noch index wie wissen in anderen Antworten.

    • Dies ist eine bessere Lösung für Elemente in der ScrollView haben variable Höhen.
    InformationsquelleAutor Sebastien Lorber
Schreibe einen Kommentar