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>