纵有疾风起
人生不言弃

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

  • 最近业务需要,在学习react-native,就顺便做个react-native实战入门系列教程。我会在学习过程中,把自己认为有用的,常用的rn知识点总结出来分享给大家

今天给大家分享reactnative动画

  • LayoutAnimation动画
    先看效果图

    react-native动画之LayoutAnimation—-实战入门react-native插图
    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走就可以直接用了。当然大家也可以参考借鉴来实现自己的功能。

文章转载于:https://www.jianshu.com/p/e10d9ee6a667

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

未经允许不得转载:起风网 » react-native动画之LayoutAnimation—-实战入门react-native

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活