Je cherche à implémenter en react native, un curseur avec des images dynamiques avec transition de fondu (jouer avec l'opacité). ce que j'ai fait, c'est
{AppStore.barbershop_details && AppStore.barbershop_details.images.map((image,i)=>(
<AnimatedImageBackground
key={i}
resizeMode="cover"
resizeMethod="resize"
style={[
style.img_background,
{ opacity: i == this.state.index_image?this.state.img_background_opacity:this.state.img_background_opacity2 }
]}
source={{uri:image}}
/>
))}
le code de rendu
changeBackgroundImageNew = ()=>{
const TIME_TRANSITION = 4500
let images_length = this.props.AppStore.barbershop_details.images.length
let index_image = 0;
setInterval(()=>{
if(this.state.index_image == images_length-1){
index_image = 0
}else{
index_image= index_image+1
}
this.setState({index_image})
},4000)
Animated.loop(
Animated.sequence([
Animated.delay(1500),
Animated.parallel([
Animated.timing(this.state.img_background_opacity, {
toValue: 0,
duration: TIME_TRANSITION
}),
Animated.timing(this.state.img_background_opacity2, {
toValue: 1,
duration: TIME_TRANSITION
})
]),
Animated.delay(1500),
Animated.parallel([
Animated.timing(this.state.img_background_opacity2, {
toValue: 0,
duration: TIME_TRANSITION
}),
Animated.timing(this.state.img_background_opacity, {
toValue: 1,
duration: TIME_TRANSITION
})
])
])
).start(() => {
});
}
J'essaie de changer les images avec une transition de fondu automatiquement animée, genre de cet exemple, mais je le veux en réaction native exemple de transition d'images
3 Réponses :
J'ai implémenté react-native-snap-carousel
Code:
import React, { Component } from "react";
import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
import { Dimensions, StyleSheet,View,Text } from 'react-native';
const { width: screenWidth } = Dimensions.get('window')
export default class App extends Component {
constructor() {
super();
this.state = {
entries: [
{
"ID": "001",
"Name": "001",
"thumbnail": "https://wallpapercave.com/wp/KaNO7Ya.jpg"
},
{
"ID": "002",
"Name": "002",
"thumbnail": "https://wallpapercave.com/wp/ZxV8qRo.jpg"
},
{
"ID": "003",
"Name": "003",
"thumbnail": "https://wallpapercave.com/wp/ytM5xOy.jpg"
}
,
{
"ID": "004",
"Name": "004",
"thumbnail": "https://wallpapercave.com/wp/STgHPst.jpg"
}
,
{
"ID": "005",
"Name": "005",
"thumbnail": "https://wallpapercave.com/wp/vg5q7pY.jpg"
}
,
{
"ID": "006",
"Name": "006",
"thumbnail": "https://wallpapercave.com/wp/b2HsGgL.jpg"
}
],
}
}
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{ item.Name }
</Text>
</View>
);
}
render () {
return (
<View style={styles.container}>
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
marginTop:50
},
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
Sortie:
Vous pouvez jouer avec ce composant et obtenir le résultat souhaité plutôt que de créer votre propre composant personnalisé. Vous pouvez créer votre conteneur d'image personnalisé et également définir la durée du fondu, etc. Pour plus de détails, parcourez sa documentation.
L'anglais n'est pas ma langue maternelle; veuillez excuser toute erreur de ma part.
Hé, je ne veux pas utiliser dans un package un tel carrousel instantané .. ce n'est pas ce que je recherche .. ce n'est pas un effet de fondu.
veuillez essayer ce code selon votre exemple:
essayez avec le style de balise View backgroundColor: '# 5f9ea0', // change la couleur et sans l'arrière-plan du jeu d'images pour cela.
imoprt { ScrollView, Dimensions} from 'react-native';
render(){
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
return(
<ScrollView
horizontal={true}
pagingEnabled= {true}
showHorizontalScrollIndicator={true}
>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 1</Text>
</View>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 2</Text>
</View>
<View style={{
flex:1,
marginTop:20,
width: screenWidth,
justifyContent: 'center',
alignItems: 'center'
}}>
<Image source={} style={{ flex: 1, resizeMode: 'cover', // or 'stretch'}} />
// add your UI code for create like
<Text> Screen 3</Text>
</View>
);
}
J'espère que cela vous aidera. Sur l'effet de mode, consultez le lien: https://www.youtube.com/watch?v=K2B0vVIHV_A
Hé, non. ce n'est pas un effet de fondu et pas de défilement automatique
Je vais essayer de vous répondre dans les plus brefs délais.
essayez d'utiliser ce package react-native-image-slider-show Hear example exemple pour savoir comment l'utiliser