0

Estoy queriendo logar que no sobre espacio y que cada caja cubra el espacio sobrante. Diseño

Tomando de referencia la imagen, quiero que el cuadro azul se mueva hacia arriba (quitando el espacio sobrante) y que a partir de ahi se acomode el resto.

Básicamente como esta otra imagen : introducir la descripción de la imagen aquí

Para esto, estoy usando Tailwind css , he aqui un ejemplo de mi codigo:

<ImageBackground source={fondo}  style={tailwind('items-center h-full w-full')}>

 <ScrollView style={tailwind('w-full ')} contentContainerStyle={tailwind('flex flex-wrap  content-center justify-center bg-red-800  flex-row w-full ')}>


 
 <TouchableOpacity style={tailwind('m-1 w-44 h-40 bg-red-500')}>

 </TouchableOpacity>

 <TouchableOpacity style={tailwind('m-1 w-44 h-64 bg-red-500')}>

</TouchableOpacity>

<TouchableOpacity style={tailwind('m-1 w-44 h-64 bg-blue-500')}>

</TouchableOpacity>
2
  • Tienes que hacerlo a mano o crearte un modulo nativo con straggeredgrid de android y en ios tambien se puede manualmente, Si no hazlo en react nomas manualmente y optimizalo. Puerba con recyclerlistview y como el overflowhidden no esta hidden en react-native puedes aprovechar eso para ponerle por afuera del padre y asi tener tu StaggeredGrid. Recyclerlistview te recycla las celdas para mejor optimizacion. Fijate si ya tienen soporte para una custom layout manager en recyclerlistview, en android y ios nativo hay.
    – OsAndNoTi
    Commented el 10 mar. 2021 a las 23:49
  • github.com/muskeinsingh/recyclerlistview-gridlayoutprovider Practicamente lo soportan aqui el ejemplo de crear su propio layout pruebalo
    – OsAndNoTi
    Commented el 11 mar. 2021 a las 0:13

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.