scrolling - React Native: centrado vertical cuando se usa ScrollView

react native scrollview not scrolling

Question

Estoy usando React Native y tengo problemas para mantener el centrado vertical de los elementos tan pronto como presento ScrollView. Para demostrar, creé 3 aplicaciones con React Native Playground. Todos los ejemplos tienen 2 páginas, y se pueden activar tocando el botón azul.

Ejemplo 1:

Este primer ejemplo muestra bloques centrados verticalmente en la página 2. Esto sucede porque el contenedor tiene aplicados estos estilos:

flex: 1,
flexDirection: ''column'',
justifyContent: ''center'',

https://rnplay.org/apps/lb5wSQ

Sin embargo, hay un problema tan pronto como cambia a la página 2, porque todo el contenido de la página no encaja, por lo que necesitamos un ScrollView .

Ejemplo 2

En este ejemplo, envuelvo todo dentro de ScrollView. Esto permite que la página 2 se desplace, pero ahora perdí el centrado vertical de la Página 1.

https://rnplay.org/apps/DCgOgA

Ejemplo 3

Para tratar de recuperar el centrado vertical de la Página 1, aplico flex: 1 al contentContainerStyle de ScrollView. Esto corrige el centrado vertical en la página 1, pero ya no puedo desplazarme hacia abajo hasta la parte inferior en la página 2.

https://rnplay.org/apps/LSgbog

¿Cómo puedo solucionar esto para obtener el centrado vertical de los elementos en la página 1 y aun así obtener ScrollView para desplazarme hasta la parte inferior en la página 2?

Answer 1

¿Por qué no envuelve solo la segunda página dentro de un ScrollView?

return (
    <ScrollView >
        <View style={styles.lipsum}>
            {this.renderButton()}
            <Text style={styles.lipsumText}>{lipsumText}</Text>
        </View>
    </ScrollView>
  );

Solo modifica tu primer ejemplo, funciona como un encanto :)

Answer 2

Aquí está mi enfoque:

Use un contenedor externo con flex : 1 , luego la vista de desplazamiento debe tener {flexGrow : 1, justifyContent : ''center''} usando contentContainerStyle , no style .

<View style={styles.mainContainer}>
  <ScrollView
    contentContainerStyle={{flexGrow : 1, justifyContent : ''center''}}>
      <View style={styles.scrollViewContainer}>
        //Put your stuff here, and it will be centered vertical
      </View>
  </ScrollView>
</View> 

Estilos:

const styles = StyleSheet.create({scrollView : {
height : Dimensions.get(''window'').height, }, mainContainer : {
flex : 1 }, scrollViewContainer : { }, })

Answer 3

Hay una nueva solución (desafortunadamente iOS solo en este momento) - podemos usar centerContent prop en Scrollview.

Answer 4

Resolví este problema con flexGrow en lugar de flex

<ScrollView contentContainerStyle={{flexGrow: 1}}>

Esto hace que el contenedor de contenido se estire para llenar el ScrollView, pero no restringe la altura máxima, por lo que aún puede desplazarse correctamente cuando el contenido amplía los límites del ScrollView.

Answer 5

EDITAR: Ahora puede usar <ScrollView contentContainerStyle={{flexGrow: 1}}> .

Para la versión anterior de React Native que no es compatible con flexGrow , use la solución a continuación.

La única forma que he encontrado para hacer esto de manera confiable tanto para iOS como para Android es establecer minHeight de la vista interna al tamaño de ScrollView . P.ej:

<ScrollView
    style={{flex: 1}}
    contentContainerStyle={{minHeight: this.state.minHeight}}
    onLayout={event => this.setState({minHeight: event.nativeEvent.layout.height})}
>

Nota: he alineado los estilos y las funciones anteriores para simplificar, pero probablemente desee utilizar referencias constantes para los valores invariables y memorizar el estilo cambiante para evitar redenders innecesarios.

const {minHeight} = this.state;
// Manually memorise changing style or use something like reselect...
if (this.lastMinHeight != minHeight) {
    this.lastMinHeight = minHeight;
    this.contentContainerStyle = {minHeight: minHeight}
}
<ScrollView
    style={styles.scrollViewStyle}
    contentContainerStyle={this.contentContainerStyle}
    onLayout={this.onScrollViewLayout}
>