我有一个控制子元素渲染的元素. (一个TouchableHighlight在其onPress中设置一些状态.)在子元素的componentDidMount方法中,我构造一个Animated.
spring并启动它.这适用于输入,但我需要反向做相同的动画退出(它就像一个抽屉). componentWillUnmount执行得太快,Animated.spring甚至无法开始工作.
我该如何处理孩子退出的动画？
我已经实现了一个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,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>
);
}
});
