- 最近业务需要,在学习react-native,就顺便做个react-native实战入门系列教程。我会在学习过程中,把自己认为有用的,常用的rn知识点总结出来分享给大家
今天给大家分享reactnative动画
-
LayoutAnimation动画
先看效果图
再来看实现代码
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走就可以直接用了。当然大家也可以参考借鉴来实现自己的功能。
文章转载于:https://www.jianshu.com/p/e10d9ee6a667
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录!
立即登录