react-native - example - react native vs ionic

React-Native, la vista de desplazamiento no se desplaza

Question

Cuando envuelvo contenido como este ejemplo a continuación, se desplaza perfectamente ...

return(
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
);

Sin embargo, cada vez que lo ajuste en otra vista, no se desplazará.

return(
<View>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);

¿Hay algún tipo de solución a esto? Estoy tratando de poner un encabezado de barra de navegación por encima de todo el contenido, aunque no pude entenderlo.

Answer 1

Es un error tipográfico: su etiqueta cercana ScrollView es: </SCrollView> lugar de </ScrollView> Y usted necesita agregar un estilo al contenedor de View , por lo que su código debe ser así:

return(
<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);

Answer 2

Intente agregar style={{flex:1}} a los componentes <View> y <ScrollView> . También tiene un error tipográfico en su código: </SCrollView> en la línea 9. Un código de ejemplo se verá así:

<View style={{backgroundColor:''white'', flex:1}}>
<NavigationBar title="Title" />
<ScrollView style={{flex:1, backgroundColor:''white''}}>
<View style={{flex:1,justifyContent:''center''}}>
<RegisterForm />
</View>
</ScrollView>
</View>

Answer 3

Otra solución es agregar una propiedad de altura al contenedor de vista principal. Esto a veces funciona bien al calcular la altura contra la altura de la pantalla.

render () {
const screenHeight = Dimensions.get(''window'').height
return(
<View style={{height: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}

Answer 4

Prueba el siguiente código:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
</ScrollView>