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} /> ); }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.
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"), }, ];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> )} />