react-native动画之LayoutAnimation--

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