翻转式卡片背面的可点击图标部分无效

Question

我有一个动画，它在放大卡片时将卡片移动到中间，然后翻转。卡的反面有一个可点击的图标，可反转动画，使卡回到原来的位置。问题是该图标的右侧（位于卡片初始位置的视图边界之外）即使在顶部也不能单击。我也尝试过使用具有相同结果的按钮。

翻转卡前的屏幕：

翻转卡后的屏幕：

下面是代码，为此我做了尽可能的简化：

import React, {Component} from 'react';
import ReactNative,
    {
        View,
        Text,
        StyleSheet,
        Image,
        TouchableWithoutFeedback,
        TouchableHighlight,
        Dimensions,
        Animated
    }
from 'react-native';
import colors from '../config/colors';
import {PrimaryButton} from '../components/PrimaryButton';
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';

const { width, height } = Dimensions.get('window');

class choose_game_screen extends Component {
    constructor (props) {
        super(props);
        this.state = {
            card_flipped: false,
            owns_app: false,
            animation1: new Animated.ValueXY(),
            scale_animation1: new Animated.Value(1),
            flip_animation1: new Animated.Value(0),
            index1: 1,
            index2: 1,
            card_disabled: false,
            card_flipped1: false,
            card_flipped2: false,
        }
    }

    ownsAppTrue = () => {
        //flip animation code
    }

    reverseFlip() {
        //reverse flip animation code
    }

    saveDimensions = e => {
        this._width = e.nativeEvent.layout.width;
        this._height = e.nativeEvent.layout.height;
    };

    test = () => {
        this.setState({card_flipped: false});
        this.setState({owns_app: false});
    }

    render() {
        // animated styles are here
        return (
            <View style={styles.container}>
                <View style={{flexDirection: 'row'}}>
                    <View style={{flex: 1, alignItems: 'center', zIndex: this.state.index1}}>
                        <TouchableWithoutFeedback
                            onPress={() => this.ownsAppTrue()}
                            disabled={this.state.card_disabled}
                        >
                            <View style={{paddingBottom: 10}}>
                                <Animated.View style={parent_animation1} onLayout={this.saveDimensions}>
                                    <Animated.View style={[styles.cardBack, front_animation1]}>
                                        <Image
                                            source={require('../components/ChooseGameCard/images/TestImage.png')}
                                            style={styles.imageSize}
                                        />
                                    </Animated.View>
                                    <Animated.View style={[back_animation1, styles.cardBack, styles.flipCard]}>
                                        <Text>This is Front</Text>
                                        <View>
                                            <TouchableHighlight
                                                onPress={() => this.reverseFlip()}
                                            >
                                                <Icon
                                                    name='ios-close-circle'
                                                    size={35}
                                                    style={{alignSelf: 'flex-start'}}
                                                    color={colors.primaryText}
                                                />
                                            </TouchableHighlight>
                                        </View>
                                    </Animated.View>
                                </Animated.View>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={{flex: 1, alignItems: 'center', zIndex: this.state.index2}}>
                        <View
                            style={{paddingBottom: 10}}
                        >
                            <Image
                                source={require('../components/ChooseGameCard/images/TestImage.png')}
                                style={styles.imageSize}
                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: colors.backgroundColor,
        margin: 10,
        borderWidth: 1,
        borderColor: colors.borderColor,
    },
    flipCard: {
        backgroundColor: colors.cardFront,
        position: 'absolute',
    },
    cardBack: {
        width: (Dimensions.get('window').width) * 0.4,
        height: ((Dimensions.get('window').width) * 0.4) * 1.5,
        alignItems: 'center',
        backfaceVisibility: 'hidden',
    },
    imageSize: {
        width: (Dimensions.get('window').width) * 0.4,
        height: ((Dimensions.get('window').width) * 0.4) * 1.5,
    },
})

export default choose_game_screen;

知道发生了什么吗？我看不到为什么整个图标都显示在顶部，但仅当它在卡的原始视图边界内时才起作用。动画将图标移动到该边界之外。