📅  最后修改于: 2020-12-08 06:08:41             🧑  作者: Mango
在本章中,我们将向您展示如何在React Native中使用LayoutAnimation 。
我们将myStyle设置为状态的属性。此属性用于设置PresentationalAnimationComponent内部的元素的样式。
我们还将创建两个函数-expandElement和坍塌元素。这些功能将从状态更新值。第一个将使用弹簧预设动画,而第二个将具有线性预设。我们也将这些作为道具传递。 Expand和Collapse按钮调用expandElement()和collapseElement()函数。
在此示例中,我们将动态更改框的宽度和高度。由于Home组件将相同,因此我们仅更改Animations组件。
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 (
)
}
}
export default Animations
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})