Estoy buscando crear una aplicación usando React Native y necesito una lista de imágenes para organizar y mostrar como fotos de actividad de Facebook.
En resumen, quiero crear la versión nativa de reacción de https://taras-d.github.io/images-grid/
¿Alguien conoce un componente RN que ofrezca algo similar?
Puede crear una cuadrícula de imágenes usted mismo configurando la altura del ancho para cada imagen y renderizándola en una fila.
Por ejemplo, desea 3 imágenes para 1 fila. Puede usar las dimensiones para obtener el ancho de las ventanas y dividirlas por 3.
const windowWidth = Dimensions.get('window').width; var IMAGES_PER_ROW = 3; calculatedSize(){ var size = windowWidth / IMAGES_PER_ROW return {width: size, height: size} }Después de eso, renderizaremos las imágenes en una fila.
renderRow(images) { return images.map((uri,i) =>{ return( <Image key={i} style={[styles.item, this.calculatedSize()]} source={{uri: uri}} /> ); }) } renderImagesInGroupsOf(count) { return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow,i) => { return ( <View style={styles.row} key={i}> {this.renderRow(imagesForRow)} </View> ) }) } Puede establecer el margen de la cuadrícula de la imagen como desee en styles.item like margin: 1 .
Ejemplo completo aquí