Я устанавливаю простую компоновку в своем приложении-нативе со списком продуктов, в котором можно нажать и открыть поток бронирования.Когда вы нажимаете на товар, все приложение перемещается влево, а страница продукта скользит справа налево.
Когда я возвращаюсь со страницы продукта, я сдвигаю приложение назад.и продукт справа.Но поскольку страница продукта является частью процесса бронирования, я полагаю, что нужно отключить компонент BookingFlow, установив состояние в false.
Проблема заключается в задержке обратного вызова анимации, поэтому она занимает 400 мс длякомпонент BookingFlow должен быть отключен.
Для этого я использую обратный вызов из Animated.parallel:
closeProduct () {
Animated.parallel([
Animated.spring(this.props.translateXApp, {
toValue: 0,
duration: 140,
bounciness: 0,
speed: 14,
easing: Easing.ease,
useNativeDriver: true
}),
Animated.spring(this.translateXProduct, {
toValue: width,
duration: 140,
bounciness: 0,
speed: 14,
easing: Easing.ease,
useNativeDriver: true
})
]).start(() => {
this.props.closeBookingFlow()
})
}
В моем app.js мой код:
<Animated.View style={[styles.translateXView,{transform: [{translateX: this.translateXApp},{scale:this.scallApp}]}]}>
<Application
openCategory={this.openCategory.bind(this)}
openProduct={this.openProduct.bind(this)}
/>
</Animated.View>
{
this.state.showBookingFlow == true?
<BookingFlow
closeBookingFlow = {this.closeBookingFlow.bind(this)}
onRef={ref => (this.bookingFlowRef = ref)}
translateXApp = {this.translateXApp}
/>
:null
}
Я нашел хитрость, чтобы избежать этой проблемы, но она не очень правильная.Я использую таймаут вне анимации, который ждет 400 мс.
setTimeout(function(){
that.props.closeBookingFlow()
}, 400);
Есть ли способ избежать задержки при анимированном обратном вызове?Спасибо, ребята.