react-native动画之LayoutAnimation--
2018-05-25 本文已影响20人
编程小石头666
- 最近业务需要,在学习react-native,就顺便做个react-native实战入门系列教程。我会在学习过程中,把自己认为有用的,常用的rn知识点总结出来分享给大家
今天给大家分享reactnative动画
-
LayoutAnimation动画
先看效果图
LayoutAnimationExample.gif
再来看实现代码
import React from 'react';
import {
NativeModules,
LayoutAnimation,
Text,
TouchableOpacity,
StyleSheet,
View,
} from 'react-native';
//如果要在Android上使用LayoutAnimation,那么目前还需要在UIManager中启用:
const {UIManager} = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
state = {
w: 100,
h: 100,
};
_onPress = () => {
// Animate the update
LayoutAnimation.spring();
this.setState({w: this.state.w + 15, h: this.state.h + 15})
}
render() {
return (
<View style={styles.container}>
<View style={[styles.box, {width: this.state.w, height: this.state.h}]}/>
<TouchableOpacity onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 200,
height: 200,
backgroundColor: 'red',
},
button: {
backgroundColor: 'black',
paddingHorizontal: 20,
paddingVertical: 15,
marginTop: 15,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
});
是不是实现起来很简单,以后给大家分享的实例都是力求简单,方便大家用到的时候,直接来把代码copy走就可以直接用了。当然大家也可以参考借鉴来实现自己的功能。