Tengo un componente "Collage", que genera 4 tipos de imágenes: BANNER, SQUARE, RETRATO y POSTER.
function Collage({ banner, square, portrait, poster }) { return ( <View> <Image uri={banner?.uri} style={styles.banner} /> <Image uri={square?.uri} style={styles.square} /> <Image uri={portrait?.uri} style={styles.portrait} /> <Image uri={poster?.uri} style={styles.poster} /> </View> ); } Collage.propTypes = { banner: PropTypes.shape({ uri: PropTypes.string.isRequired }), square: PropTypes.shape({ uri: PropTypes.string.isRequired }), portrait: PropTypes.shape({ uri: PropTypes.string.isRequired }), poster: PropTypes.shape({ uri: PropTypes.string.isRequired }), }Ahora, quiero agregar la funcionalidad de hacer algo (diferente para cada imagen) al presionar las imágenes del collage.
Algo como:
<Collage banner={banner} onPressBanner={handleOnPressBanner} square={square} onPressSquare={handleOnPressSquare} portrait={portrait} onPressPortrait={handleOnPressPortrait} poster={poster} onPressPoster={handleOnPressPoster} /> ... function Collage({ banner, onPressBanner ... }) { return ( <View> <TouchableOpacity onPress={onPressBanner}> <Image uri={banner?.uri} style={styles.banner} /> </TouchableOpacity> ... repeat for others </View> ); }Parece un código poco profesional, en mi opinión, y podría haber una manera de simplificarlo, con menos accesorios y más generalización. ¿Algunas ideas?
Ampliaré el comentario:
O desea crear las funciones dentro del componente Collage (en lugar de recibirlas como accesorios)
O haga que se envíe una matriz de imágenes al componente View . Algo como:
function Collage({ images }) { return ( <View> images.map(image => ( <Image key={`collage-image-${image.type}`} uri={image.uri} style={styles[image.type]} onClick={image.onClick} /> ) </View> ); } donde imágenes es una matriz, cada elemento de la matriz contiene un uri, un tipo (que debería ser uno de banner, square, portrait, poster en su caso) y un controlador de clic.
Advertencia: si tiene varios collages en la misma página, es posible que desee enviar algún accesorio adicional para asegurarse de que no tendrá two children with the same key .