react native - react - Desplácese hasta la parte superior de ScrollView

react-native-keyboard-aware-scroll-view

Question

¿Hay alguna forma de desplazarse hasta la parte superior de un ScrollView en respuesta a la presión de un botón?

Puedo forzar una render de toda la página, pero eso parece muy ineficiente.

Answer 1

1. Primero agregue un atributo ref a su componente ScrollView . Ejemplo: <ScrollView ref=''_scrollView''>
2. Luego, donde quiera que quiera desplazarse hacia arriba, haga esto. Ejemplo: onPress={() => { this.refs._scrollView.scrollTo(0); }} onPress={() => { this.refs._scrollView.scrollTo(0); }}

Answer 2

Con un botón para controlar el scrollveiw o listview view es posible.

en primer lugar, puede usar el evento onScroll method put para detectar el event.nativeEvent.contentOffset.y de ListView o scrollView, puede establecer un estado para controlar su visualización s show or hide according to the y`.

Luego, establece un botón en tu página, usa el método onPress y el método .scrollTo para hacerlo.

Aquí hay una implementación que puede usarse como referencia: https://www.npmjs.com/package/react-native-scrolltotop

Esperando que esto ayude

Answer 3

Puede ejecutar el método "scrollTo" de ScrollView. Echa un vistazo a la fuente .

Puede obtener la referencia del componente ScrollView configurando la propiedad ref y utilizando this.refs como se describe aquí: https://facebook.github.io/react/docs/more-about-refs.html

Answer 4

Un ejemplo simple:

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

Answer 5

scrollTo(x,y) ahora está en desuso. Ahora es mejor pasar un objeto a scrollTo de esta manera:

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