react-native动画之LayoutAnimation—-实战入门react-native

• 最近业务需要，在学习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走就可以直接用了。当然大家也可以参考借鉴来实现自己的功能。

原著是一个有趣的人,若有侵权,请通知删除