React Native-动画只能在iOS和Android模拟器中使用，而不能在Android设备中使用

Question

这是一个非常不寻常的问题...

我有一个View，其作用类似于抽认卡。我使用了动画来翻转抽认卡。

单击抽认卡后，系统完全崩溃。它可以正常运行一次，但随后甚至无法检测到点击。

import React, {Component} from 'react';
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback, Easing } from 'react-native';
import Swiper from 'react-native-swiper';
import AppText from "../components/AppText";

type Props = {};

export default class FlashcardScreen extends Component<Props> {

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('title', 'Flashcards')
        }
    };

    constructor(props){
        super(props);
        this.animatedValue = new Animated.Value(0);
        this.value = 0;
        this.textAnimatedValue = new Animated.Value(0);
        this.animatedValue.addListener(({value}) => {
            this.value = value;
            if (value === 90){
                Animated.timing(this.textAnimatedValue, {
                    toValue: 0,
                    duration: 250,
                }).start();
            }
        });
    }

    state = {
        cards: this.props.navigation.state.params.cards,
        displayTexts: Object.keys(this.props.navigation.state.params.cards),
        index: 0,
    };

    flipAnimation = (index) => {
        alert("Clicked!");
        let { displayTexts, cards } = this.state;
        const tempDisplayTexts = [...displayTexts];
        const toValue = this.value >= 90 ? 0 : 180;
        const entry = Object.entries(cards)[index];
        Animated.parallel([
            Animated.timing(this.animatedValue, {
                toValue: 90,
                duration: 250,
                easing: Easing.linear
            }),
            Animated.timing(this.textAnimatedValue, {
                toValue: 90,
                duration: 250
            })
        ]).start(() => {
            if(displayTexts[index] === entry[0]){
                tempDisplayTexts[index] = entry[1];
            } else {
                tempDisplayTexts[index] = entry[0];
            }
            this.setState({ displayTexts: tempDisplayTexts });
            Animated.parallel([
                Animated.timing(this.animatedValue, {
                    toValue: toValue,
                    duration: 250,
                    easing: Easing.linear
                }),

            ]).start();
        });
    };

    render() {
        let { cards, displayTexts } = this.state;
        this.SetInterpolate = this.animatedValue.interpolate({
            inputRange: [0, 180],
            outputRange: ['0deg', '180deg'],
        });
        const Rotate_X_AnimatedStyle = {
            transform: [{ rotateX: this.SetInterpolate }],
        };
        this.textSetInterpolate = this.textAnimatedValue.interpolate({
            inputRange: [0, 90],
            outputRange: ['0deg', '90deg'],
        });
        const Test_Rotate_X_AnimatedStyle = {
            transform: [{ rotateX: this.textSetInterpolate }]
        };
        return (
            <View style={styles.container}>
                <Swiper showsPagination={false} loop={false} onIndexChanged={(index) => this.setState({ index })}>
                    {
                        Object.entries(cards).map((question, index) => {
                            return (
                                <View style={styles.main}>
                                    <TouchableWithoutFeedback onPress={() => this.flipAnimation(index)}>
                                        <Animated.View style={[Rotate_X_AnimatedStyle, styles.card]} />
                                    </TouchableWithoutFeedback>
                                    <Animated.Text
                                        onPress={() => this.flipAnimation(index)}
                                        style={[styles.text, Test_Rotate_X_AnimatedStyle]}>
                                        {displayTexts[index]}
                                    </Animated.Text>
                                </View>
                            )
                        })
                    }
                </Swiper>
                <AppText style={styles.position} text={(this.state.index + 1) + " / " + this.state.displayTexts.length} />
            </View>
        );
    }
}

我试图更改代码，以使每张卡都有其自己的animationValue和textValue，但无法解决问题。

这是我录音的链接。第一个是模拟器，第二个是设备：

https://imgur.com/gallery/xKYs3bc

在此先感谢您的帮助！我已经花了几个小时了：/