реагировать родной анимационный перевод Y флип - PullRequest
0 голосов
/ 21 октября 2018

Я пытаюсь заставить реагировать нативную анимацию на мои кнопки.У меня есть 2 кнопки.одна кнопка отображается, когда я нажимаю на кнопку, я хочу, чтобы вторая кнопка перевернулась (вид перевернутой карты - перевод Y) и отобразилась на экране.enter image description here

, как вы можете видеть здесь, когда я нажимаю кнопку «Нажми меня», а затем «новая кнопка» отображается во флип-анимации.

часть моего кода

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

Кроме того, когда я нажимаю ее снова, я хочу, чтобы она быласкрыт таким же образом.перевернуть вверх.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...