Je joue avec Réactualiser Native et j'ai un problème avec l'animation de transition.La transition d'animation avec React Native ne fonctionne pas correctement
Windows 10 - Hyper V, émulateur de code visuel Android - Ignite Boilerplate.
Ce que je suis en train de faire:
Lorsque je clique, je veux montrer un cercle avec une animation à grande échelle de 0 à 2 sur la position de clic.
Ce que j'ai:
Voir l'image ci-dessous (j'ai mis un setTimout pour voir la première image). Au premier clic, le composant est affiché une première fois très rapidement avec sa largeur et sa hauteur naturelles mais l'échelle sur 0,001 n'a aucun effet. Après cela, l'animation commence à partir de l'échelle 0,001 à 2.
Avec les autres clics, le cercle commence les premières images avec la dimension du cercle précédent. et puis, l'animation commence. Mais une fois de plus, l'échelle: 0 n'a aucun effet sur la première image.
Voici le code de l'écran Déjeuner:
export default class LaunchScreen extends Component {
state = {
clicks: []
};
handlePress(evt) {
console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY)
let xCoord = evt.nativeEvent.locationX;
let yCoord = evt.nativeEvent.locationY;
this
.state
.clicks
.push({x: xCoord, y: yCoord});
this.setState({clicks: this.state.clicks});
}
renderClick() {
if (this.state.clicks.length > 0) {
return this
.state
.clicks
.map((item, i) =>< ClickAnimation key = {
item.x
}
x = {
item.x
}
y = {
item.y
} />)
} else {
return <View/>
}
}
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.scrollView}
horizontal={true}
showsHorizontalScrollIndicator={true}
contentContainerStyle={styles.scrollView}>
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onPress=
{evt => this.handlePress(evt)}>
<View style={styles.scrollView}>
{this.renderClick()}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</View>
)
}
}
Et ici la composante du cercle:
import React from 'react';
import PropTypes from 'prop-types';
import {Animated, View, Easing} from 'react-native';
export default class ClickAnimation extends React.Component {
constructor() {
super();
console.log(this.state)
this.state = {
scaleAnim: new Animated.Value(0.001);
};
}
componentDidMount() {
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 2000
})
.start();
.scaleAnim
}
render() {
return (<Animated.View
style={{
zIndex: 10,
borderColor: "blue",
borderRadius: 400,
borderWidth: 1,
position: "absolute",
top: this.props.y,
left: this.props.x,
width: 60,
height: 60,
backgroundColor: "red",
transform: [
{
scaleY: this.state.scaleAnim
? this.state.scaleAnim
: 0
}, {
scaleX: this.state.scaleAnim
? this.state.scaleAnim
: 0
}
]
}}/>);
}
}
Avez-vous une idée pourquoi il en est ainsi?