Native reagieren - Animationen
In diesem Kapitel zeigen wir Ihnen die Verwendung LayoutAnimation in React Native.
Animationskomponente
Wir werden setzen myStyleals Eigentum des Staates. Diese Eigenschaft wird zum Stylen eines Elements im Inneren verwendetPresentationalAnimationComponent.
Wir werden auch zwei Funktionen erstellen - expandElement und collapseElement. Diese Funktionen aktualisieren Werte aus dem Status. Der erste wird die verwendenspring voreingestellte Animation, während die zweite die hat linearvoreingestellt. Wir werden diese auch als Requisiten übergeben. DasExpand und die Collapse Tasten rufen die expandElement() und collapseElement() Funktionen.
In diesem Beispiel ändern wir dynamisch die Breite und Höhe der Box. Seit derHome Komponente wird die gleiche sein, wir werden nur die ändern Animations Komponente.
App.js.
import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
componentWillMount = () => {
this.animatedWidth = new Animated.Value(50)
this.animatedHeight = new Animated.Value(100)
}
animatedBox = () => {
Animated.timing(this.animatedWidth, {
toValue: 200,
duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
toValue: 500,
duration: 500
}).start()
}
render() {
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
return (
<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
<Animated.View style = {[styles.box, animatedStyle]}/>
</TouchableOpacity>
)
}
}
export default Animations
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})