上一章React
Native实战教程请查看：React
Native Button元素
在本章中，我们将向你展示如何在React Native中使用LayoutAnimation。
动画组件首先我们将把myStyle设置为状态state属性，此state属性用于对PresentationalAnimationComponent中的元素进行样式化。
我们还将创建两个函数——expandElement和collapseElement。这些函数将从状态更新值，第一个将使用spring预设动画，而第二个将有线性linear预设。我们也将把这些作为prop传递，展开expend和折叠collapse按钮调用expandElement()和collapseElement ()函数。
【React Native动画LayoutAnimation –
React Native实战教程】在本例中，我们将动态更改框的宽度和高度，由于Home组件是相同的，我们将只更改动画组件。
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,
},
});
推荐阅读
- React Native调试debug – React Native实战教程
- React Native Button元素 – React Native实战教程
- React Native HTTP网络请求 – React Native实战教程
- React Native图片Image元素 – React Native实战教程
- React Native ScrollView元素 – React Native实战教程
- React Native使用文本输入TextInput元素 – React Native实战教程
- React Native列表ListView – React Native实战教程
- Scala中的方法重载用法指南
- PHP json_decode()函数用法详细介绍