Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

130
Vistas
Cómo requerir una imagen en react-native

Necesito mostrar imágenes como carrusel y no puedo requerirlas correctamente. Traté de requerirlos en json como este {"Imagen": require("$PATH")} o en el archivo js en la etiqueta ParalaxImage pero nada....

creador de artículos

 _renderItem ({item, index}, parallaxProps) { return ( <View style={styles.item}> <ParallaxImage source={item.landscapeImage} containerStyle={styles.imageContainer} style={styles.image} parallaxFactor={0.4} {...parallaxProps} /> </View> ); }

archivo JSON

 [ { "name": "snydercut", "image": "../../assets/moviePictures/snydercut.jpeg", "landscapeImage": "../../assets/moviePictures/snydercutLandscape.jpeg" }, { "name": "batman", "image": "../../assets/moviePictures/batman.jpeg", "landscapeImage": "../../assets/moviePictures/batmanLandscape.jpeg" }, { "name": "avatar", "image": "../../assets/moviePictures/avatar.jpeg", "landscapeImage": "../../assets/moviePictures/avatarLandscape.jpeg" } ]

y aquí está mi código de carrusel

 render () { return ( <Carousel sliderWidth={screenWidth} sliderHeight={screenWidth} itemWidth={screenWidth - 60} data={moviePicturesInfo} renderItem={this._renderItem} hasParallaxImages={true} /> ); }
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

No he usado esto con el componente ParallaxImage antes, pero en mi caso para un componente de imagen, acabo de agregar el uri, para casos como el suyo, donde la ruta proviene como variable de un recurso externo, use el uri. Entonces, eso sería algo como esto:

 _renderItem ({item, index}, parallaxProps) { return ( <View style={styles.item}> <ParallaxImage source={{uri: item.landscapeImage}} containerStyle={styles.imageContainer} style={styles.image} parallaxFactor={0.4} {...parallaxProps} /> </View> ); }

Lo siento si cometí un error o si no pudo entender algo, esta es mi primera respuesta en stackoverflow. Siéntase libre de preguntar algo si no pude dejarlo claro.

about 4 years ago · Juan Pablo Isaza Denunciar

0

React Native no admite la solicitud de imágenes dinámicamente en tiempo de ejecución.

Refactorice su código de la siguiente manera:

 [ { name: "snydercut", image: require("../../assets/moviePictures/snydercut.jpeg"), landscapeImage: require("../../assets/moviePictures/snydercutLandscape.jpeg"), }, { name: "batman", image: require("../../assets/moviePictures/batman.jpeg"), landscapeImage: require("../../assets/moviePictures/batmanLandscape.jpeg"), }, { name: "avatar", image: require("../../assets/moviePictures/avatar.jpeg"), landscapeImage: require("../../assets/moviePictures/avatarLandscape.jpeg"), }, ];
about 4 years ago · Juan Pablo Isaza Denunciar

0

para las imágenes en carrusel, use flatlist agregando horizontal={true} en su lista plana como

 <FlatList horizontal={true} data={crldata} keyExtractor={({ id }, index) => id} renderItem={({ item }) => ( <TouchableOpacity style={{backgroundColor:"white",margin:12,borderRadius:15}} onPress={() => { navigation.navigate('detail', { pid: item.id, purl: url, name: item.pname, price: item.price, des: item.des, dc: item.dc, img: item.img, }); }}> <Image source={{uri:item.img}} style={{ width: '100%',height:250,padding:120}}> </Image> <Text style={{color:"black",marginLeft:12}}>{item.pname}</Text> <Text style={{color:"black",marginLeft:12}}>Price= Rs {item.price}</Text> </TouchableOpacity> )} />
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda