Question

我有一个控制子元素渲染的元素。（一个TouchableHighlight在其onPress中设置了一些状态。）在子元素的componentDidMount方法中，我构造了Animated.spring和start它。这适用于输入，但我需要反向做相同的动画退出（它像抽屉一样）。 componentWillUnmount执行速度过快，Animated.spring甚至无法开始工作。

我如何处理孩子退出的动画？

Answer 1

我已经实现了一个FadeInOut组件，该组件会在isVisible属性更改时为组件设置动画。我之所以这样做是因为我想避免显式处理应该使用动画进入/退出的组件中的可见性状态。

<FadeInOut isVisible={this.state.someBooleanProperty} style={styles.someStyle}>
  <Text>Something...</Text>
</FadeInOut>

此实现使用延迟淡入淡出，因为我用它来显示进度指示器，但您可以将其更改为使用您想要的任何动画，或者将其概括为接受动画参数作为道具：

'use strict';

import React from 'react-native';

const {
  View,
  Animated,
  PropTypes
} = React;

export default React.createClass({
  displayName: 'FadeInOut',
  propTypes: {
    isVisible: PropTypes.bool.isRequired,
    children: PropTypes.node.isRequired,
    style: View.propTypes.style
  },

  getInitialState() {
    return {
      view: this.props.children,
      opacity: new Animated.Value(this.props.isVisible ? 1 : 0)
    };
  },

  componentWillReceiveProps(nextProps) {
    const isVisible = this.props.isVisible;
    const shouldBeVisible = nextProps.isVisible;

    if (isVisible && !shouldBeVisible) {
      Animated.timing(this.state.opacity, {
        toValue: 0,
        delay: 500,
        duration: 200
      }).start(this.removeView);
    }

    if (!isVisible && shouldBeVisible) {
      this.insertView();
      Animated.timing(this.state.opacity, {
        toValue: 1,
        delay: 500,
        duration: 200
      }).start();
    }
  },

  insertView() {
    this.setState({
      view: this.props.children
    });
  },

  removeView() {
    this.setState({
      view: null
    });
  },

  render() {
    return (
      <Animated.View
        pointerEvents={this.props.isVisible ? 'auto' : 'none'}
        style={[this.props.style, {opacity: this.state.opacity}]}>
        {this.state.view}
      </Animated.View>
    );
  }
});

Answer 2

我认为你的动画版权已经倒转了。如果将动画逻辑移动到打开和关闭子项的父项，则问题会变得更加简单。不是在componentDidMount上开始动画，而是在点击你的TouchableHighlight时，除了你需要做的对孩子的任何道具操作外，独立于此。

然后当用户点击关闭时，你可以按照正常情况简单地反转动画，你甚至不需要卸载动画。此外，这将允许您拥有一个可重复使用的抽屉（上下滑动的东西），并将其从其中的内容中抽象出来。因此，您可以使用单个抽屉机制来支持多种不同类型的内容。

React Native：在hide上触发动画

2 个答案: