У меня есть собственный модальный, который скользит в componentDidMount
:
componentDidMount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: 0
}).start()
}
Хорошо, это было легко. Тем не менее, мне также нравится сдвигать модальность, когда компонент размонтируется. Для меня componentWillUnmount()
будет чувствовать себя правильно, поскольку это элегантный декларативный способ:
componentWillUnmount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: deviceHeight
}).start()
}
Но это, конечно, работает не, потому что React не ждет, пока я не закончу свою анимацию.
Итак, в настоящее время я обхожу это с помощью специальной функции:
closeModal() {
Animated.timing(this._animatedValue.y, {
duration: C.filterModalDuration,
toValue: deviceHeight
}).start()
InteractionManager.runAfterInteractions(() => {
this.props.UnmountThisComponent()
})
}
Это, конечно, не так элегантно, но работает. Тем не менее, боль начинается, если мне нужно вызвать эту функцию из компонента, находящегося далеко внизу в дереве компонентов, т.е. Мне нужно вручную передать эту функцию через onUnmount={()=> closeModal()}
, а затем с помощью onUnmount={this.props.onUnmount}
снова и снова...
Тогда я подумал, что смогу решить это с помощью redux и redux-connect. Я подумывал вызвать изменение состояния редукции из дочерних компонентов, которое затем вызывало бы функцию через componentWillRecieveProps()
следующим образом:
componentWillReceiveProps (nextProps) {
if (nextProps.closeFilter === true) {
this.closeModal()
}
}
Однако это кажется довольно халатным и императивным.
Есть ли способ решить эту проблему элегантным/декларативным способом?