React Native动画LayoutAnimation – React Native实战教程

上一章React Native实战教程请查看：React Native Button元素

在本章中，我们将向你展示如何在React Native中使用LayoutAnimation。

动画组件

首先我们将把myStyle设置为状态state属性，此state属性用于对PresentationalAnimationComponent中的元素进行样式化。

我们还将创建两个函数——expandElement和collapseElement。这些函数将从状态更新值，第一个将使用spring预设动画，而第二个将有线性linear预设。我们也将把这些作为prop传递，展开expend和折叠collapse按钮调用expandElement()和collapseElement ()函数。

在本例中，我们将动态更改框的宽度和高度，由于Home组件是相同的，我们将只更改动画组件。

App.js

import React, {Component} from 'react';
import {View, StyleSheet, Animated, TouchableOpacity} from 'react-native';

class Animations extends Component {
  componentWillMount = () => {
    this.animatedWidth = new Animated.Value(50);
    this.animatedHeight = new Animated.Value(100);
  };
  animatedBox = () => {
    Animated.timing(this.animatedWidth, {
      toValue: 200,
      duration: 1000,
    }).start();
    Animated.timing(this.animatedHeight, {
      toValue: 500,
      duration: 500,
    }).start();
  };
  render() {
    const animatedStyle = {
      width: this.animatedWidth,
      height: this.animatedHeight,
    };
    return (
      <TouchableOpacity style={styles.container} onPress={this.animatedBox}>
        <Animated.View style={[styles.box, animatedStyle]} />
      </TouchableOpacity>
    );
  }
}
export default Animations;

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'blue',
    width: 50,
    height: 100,
  },
});