反应本地动画翻译Y翻转

Question

我正在尝试在按钮上制作本机动画。我有2个按钮。显示一个按钮，当我按下该按钮时，我希望第二个按钮翻转（那种翻转卡-转换Y）并显示在屏幕上。

当我按下“ Press me”按钮，然后以翻转动画形式显示“ new button”时，您会在这里看到。

我的部分代码

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

此外，当我再次按下它时，我希望以同样的方式将其隐藏。向上翻转。