Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

133
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda