Javascript 翻转卡背面的可点击图标部分不工作

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

翻转卡前的屏幕：

翻转卡片后的屏幕：

以下是代码，我尽可能简化了代码：

import React，{Component}来自'React'；
从本地输入，
{
看法
文本，
样式表，
形象,，
可触摸且无反馈，
触控高光，
尺寸，
有生气的
}
从“反应本机”；
从“../config/colors”导入颜色；
从“../components/PrimaryButton”导入{PrimaryButton}；
从“@react native community/async storage”导入异步存储；
从“反应本机矢量图标/离子图标”导入图标；
const{width，height}=Dimensions.get（'window'）；
类选择游戏屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
卡片翻转：错误，
你的应用程序：false，
动画1：新的动画.ValueXY（），
缩放动画1：新的动画值（1），
翻转动画1：新的动画值（0），
索引1:1，
指数2:1，
卡_已禁用：false，
卡片翻转1：错误，
卡片翻转2：错误，
}
}
ownsAppTrue=（）=>{
//翻转动画代码
}
reverseeflip（）{
//反向翻转动画代码
}
saveDimensions=e=>{
此._width=e.nativeEvent.layout.width；
此._height=e.nativeEvent.layout.height；
};
测试=（）=>{
this.setState（{card_fliped:false}）；
this.setState（{owns_app:false}）；
}
render（）{
//这里有动画风格
返回(
this.ownsAppTrue（）}
disabled={this.state.card_disabled}
>
这是前面
this.reverseFlip（）}
>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
背景颜色：颜色。背景颜色，
差额：10，
边框宽度：1，
borderColor:colors.borderColor，
},
动画卡：{
背景颜色：colors.cardFront，
位置：'绝对'，
},
回拨：{
宽度：（尺寸.get（'window'）。宽度）*0.4，
高度：（（尺寸、尺寸、窗宽）*0.4）*1.5，
对齐项目：“居中”，
背面可见性：“隐藏”，
},
图像大小：{
宽度：（尺寸.get（'window'）。宽度）*0.4，
高度：（（尺寸、尺寸、窗宽）*0.4）*1.5，
},
})
导出默认选择游戏屏幕尝试删除图标的
可触摸突出显示周围的
视图
。或者删除图标样式
{alignSelf:'flex start'}

我自己尝试了这两种方法，同时也尝试了这两种方法。我仍然得到相同的行为。请尝试删除图标的

可触摸突出显示

周围的

视图

。或者删除图标样式{alignSelf:'flex start'}我自己尝试了这两种方法，同时也尝试了这两种方法。我仍然有同样的行为。