2016-06-20 19 views
2

Jede Art von Scrollen zu einer bestimmten Zeile in einem React Native ListView?In einer ReactNative ListView zu einer Zeile scrollen?

Ich habe den Index der Zeile, die ich scrollen möchte. Nach this thread kann ich einen Verweis auf die Zeile erhalten, die ich scrollen möchte. Und ich kann das list's scrollTo function verwenden, um das Scrollen zu machen. Aber wie binde ich das zusammen? Jede Methode, die ich versuche, den Offset einer Zeile zu finden, gibt mir NaN s oder einen anderen Fehler.

Antwort

2

vielleicht weiß jemand bessere Lösung, aber ich benutze folgende Dienstprogramm-Klasse zum Scrollen. Angenommen, Sie haben bereits eine Referenz auf das Kind, besteht die Grundidee darin, dass Sie das Kind in der Bildlaufansicht messen können, um seine Position zu bestimmen, und dann können Sie den benötigten Offset berechnen.

/** 
scroll child within scrollView. 

@param scrollView reference to scrollView 
@param child - measureable child (see measureLayout in https://facebook.github.io/react-native/docs/nativemethodsmixin.html) 
@param opt - options - (*default*) 
{ 
    destination : *'top'*, 'bottom' : where to scroll - to the top or bottom of view 
} 
*/ 
export function scrollTo(scrollView, child, opt = {}) { 
    const destination = opt.destination || TOP; 

    const handle = React.findNodeHandle(scrollView); 
    child.measureLayout(handle, (x,y, width, height) => { 
    // kind of hack - not really documented feature 
    scrollView.refs.ScrollView.measure((sx,sy, sw, sh, sPageX, sPageY) => { 
     scrollView.refs.InnerScrollView.measure((isx,isy, isw, ish, isPageX, isPageY) => { 
     console.log("scrollTo", x,y, width, height, sx,sy, sw, sh, sPageX, sPageY, isx,isy, isw, ish, isPageX, isPageY); 
     const currentScrollPosition = sPageY - isPageY; 
     if (currentScrollPosition <= y && y + height <= currentScrollPosition + sh) { 
      // the child fits into scroll view -> noop 
      console.log("fitting in"); 
     } else { 
      if (destination === TOP) { 
      if (y + sh > ish) { 
       // we would scroll too much (there is not so much content after child to fill whole scroll view) 
       scrollView.scrollTo({x:0, y: ish - sh}); 
      } else { 
       scrollView.scrollTo({x:0, y}); 
      } 
      } else { 
      scrollView.scrollTo({x:0, y: y + height - sh}); 
      } 
     } 
     }); 
    }); 
    }); 

} 

note - es funktioniert nur mit RN0.27 + (bis sie Interna von Scroll wieder ändern :))

+0

Danke, ich so etwas versucht, aber 'child.measureLayout' den Fehler wirft "Versucht, das Layout zu messen, aber Offset oder Abmessungen waren NaN". Irgendeine Idee, worum es geht? – nicholas

+0

hm. ist mir nie passiert. vielleicht http://stackoverflow.com/questions/31617206/react-native-get-the-position-of-a-component-in-the-view - aber ich scrollt nur als Reaktion auf Benutzeraktion, so sollte es nicht passieren zu mir, dass ich zu früh messe. – sodik

Verwandte Themen