Animation 反应本机：在隐藏时触发动画

我有一个元素控制子元素的渲染。（在子元素的

componentDidMount

方法中，我构建了一个

动画的.spring

和

启动

方法。这适用于进入，但我需要做同样的动画反向退出（它就像一个抽屉）

ComponentUnmount

执行得太快，以至于

Animated.spring

无法开始工作

---

我该如何处理设置孩子退出动画的问题？

我想你已经将动画所有权倒置了。如果将动画逻辑移动到打开和关闭子对象的父对象，问题就会简单得多。不要在

componentDidMount

上开始动画，只需单击TouchableHighlight即可完成动画，而不需要对孩子进行任何道具操作

---

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

我已经实现了一个

FadeInOut

组件，当组件的

属性发生变化时，该组件将设置其进出动画。我这样做是因为我想避免显式地处理组件中的可见性状态，这些组件应该随动画进入/退出

<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>
    );
  }
});

“严格使用”；
从“React native”导入React；
常数{
看法
有生气的
道具
}=反应；
导出默认的React.createClass({
displayName:“FadeInOut”，
道具类型：{
isVisible:PropTypes.bool.isRequired，
子项：PropTypes.node.isRequired，
样式：View.propTypes.style
},
getInitialState（）{
返回{
视图：this.props.children，
不透明度：新的动画.Value（this.props.isVisible？1:0）
};
},
组件将接收道具（下一步）{
const isVisible=this.props.isVisible；
const shouldbeevisible=nextrops.isVisible；
如果（isVisible&！shouldbeevisible）{
动画。计时（this.state.opacity{
toValue:0，
延误：500，
持续时间：200
}).start（此.removeView）；
}
如果（！isVisible&&shouldbeevisible）{
这是一个.insertView（）；
动画。计时（this.state.opacity{
toValue:1，
延误：500，
持续时间：200
}).start（）；
}
},
insertView（）{
这是我的国家({
视图：this.props.children
});
},
removeView（）{
这是我的国家({
视图：空
});
},
render（）{
返回(
{this.state.view}
);
}
});