Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

129
Views
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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!