Я пытаюсь заставить реагировать нативную анимацию на мои кнопки.У меня есть 2 кнопки.одна кнопка отображается, когда я нажимаю на кнопку, я хочу, чтобы вторая кнопка перевернулась (вид перевернутой карты - перевод Y) и отобразилась на экране.
, как вы можете видеть здесь, когда я нажимаю кнопку «Нажми меня», а затем «новая кнопка» отображается во флип-анимации.
часть моего кода
this.translateYValue = new Animated.Value(0);
функция для рендеринга анимации
async chooseTime(slot, index) {
await this.setState({ indexBtnTime: index, slotChosen: slot })
this.translateYValue.setValue(0);
Animated.timing(this.translateYValue, {
toValue: 1,
duration: 300,
easing: Easing.ease,
useNativeDriver: true
}).start();
}
здесь часть моего рендера
const timesButtons = times && times.length > 0 && times.map((slot, index) => {
let activeBtn = index == indexBtnTime
const translateMoveY = this.translateYValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 3]
});
const titleTransformStyle = {
transform: [{ translateY: translateMoveY }]
};
return (
<View key={index} style={viewBtn}>
<Button style={[btnTime, activeBtn ? activeBtnTime : {}]} onPress={() => { this.chooseTime(slot, index) }}>
<Text style={[txtTime, activeBtn ? activeTxtTime : {}]}>Press Me</Text>
</Button>
{activeBtn && <Animated.View style={[viewInvite, titleTransformStyle]}>
<Button style={btnAddAppointmentInvite} onPress={() => { this.addAppointment() }}>
<Text style={txtAddAppointmentInvite}>new button</Text>
</Button>
</Animated.View>}
</View>
)
})
Кроме того, когда я нажимаю ее снова, я хочу, чтобы она быласкрыт таким же образом.перевернуть вверх.