0
Actuellement, mon animation React Native ne se produit qu'une seule fois puis plus jamais. J'en ai besoin chaque fois qu'un de mes accessoires pour ce composant change. J'ai l'affichage de données changeant quand les nouvelles données de prop entrent mais elles animent seulement la première fois. Existe-t-il un moyen pour que l'animation se reproduise chaque fois que les accessoires changent/les mises à jour du composant?Comment faire en sorte qu'une animation native React se reproduise?
Voici ce que j'ai jusqu'à présent:
import React from 'react';
import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
//Animation
class FadeInView extends React.Component {
state = {
yAnimation: new Animated.Value(21),
}
componentDidMount() {
Animated.timing(
this.state.yAnimation,
{
//easing: Easing.bounce,
toValue: 0,
duration: 150,
}
).start();
}
render() {
let { yAnimation } = this.state;
return (
<Animated.View
style={{
...this.props.style,
transform: [{translateY: this.state.yAnimation}],
}}
>
{this.props.children}
</Animated.View>
);
}
}
//Price Component
export default class Price extends React.Component {
constructor(props) {
super(props);
this.animateNow = false;
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.price !== nextProps.price) {
console.log('true');
return true;
} else {
return false;
}
}
componentWillUpdate() {
if (this.props.price != this.localPrice) {
this.animateNow = true;
}
}
componentDidUpdate() {
this.localPrice = this.props.price;
this.animateNow = false;
console.log(this.props.price);
}
render() {
if (this.animateNow) {
return (
<FadeInView>
<Text style={styles.price}>{this.props.price}</Text>
</FadeInView>
);
} else {
return (
<View>
<Text style={styles.price}>{this.props.price}</Text>
</View>
);
}
}
}
const styles = StyleSheet.create({
price: {
fontFamily: 'Avenir',
fontSize: 21,
color: '#606060',
textAlign: 'right',
marginRight: 20,
backgroundColor: 'transparent'
}
});