Android TouchableOpacity在绝对定位视图内不工作

我有一个绝对定位视图，其中包含三个TouchableOpacity组件，这三个组件没有响应，它们根本不工作。这里出了什么问题

代码

<View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}>
    <TouchableOpacity onPress={() => this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
    </TouchableOpacity>
</View>

this.getDocuments（'high'）}style={[styles.highNormalLowDocListHeaderStateTextContainer，highSelected.borderStyle]}>
高
this.getDocuments（'normal'）}style={[styles.highNormalLowDocListHeaderStateTextContainer，normalSelected.borderStyle]}>
正常的
this.getDocuments（'low'）}style={[styles.highNormalLowDocListHeaderStateTextContainer，lowSelected.borderStyle]}>
低

截图

---

即使选项卡栏在视觉上显示在列表内容的上方，列表的触摸事件也可能在选项卡栏之前接收到它。将zIndex添加到选项卡栏以允许它首先接收触摸事件。

只需将

zIndex:1

添加到包含按钮的视图中即可

另请注意：添加提升会给android按钮添加阴影，有时提升也可能是一个问题，如果它添加到父级而不是添加到子级，则子级按钮可能无法工作（罕见情况）

例如：

---

如果TouchableOpacity的onPress不起作用， 在这种情况下，TouchableNativeFeedback将起作用

例如：

{ Platform.OS === 'ios' ?
  <TouchableOpacity onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>  
  </TouchableOpacity>
  :
  <TouchableNativeFeedback onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>
  </TouchableNativeFeedback>
}

{Platform.OS=='ios'？
this.showPassordText（）}>
显示
:
this.showPassordText（）}>
显示
}

查看您的导入。如果

从“反应本机手势处理程序”导入{TouchableOpacity}

不起作用，您需要从

'react-native'

导入此项。通常，在进行绝对定位时，您必须放置zIndex，因为绝对延迟的ui视图有时会呈现在另一个视图后面

您的绝对元素可能放置在相对元素中。如果您想单击它，您应该删除父相对规则。

从“react native手势处理程序”导入TouchableOpacity对我很有用

import { TouchableOpacity} from 'react-native-gesture-handler'

---

我修复了这个问题，为每个父对象添加了一个flex:1，为每个父对象添加了一个height/width。还可以尝试使用flex:1将每个TouchableOpacity拉出到单独的视图中，并将绝对定位添加到子（文本）元素中。我的按钮上有一个动画，所以可能有点不同。

使用

react native signature handle

的关键是它们的性能更好，所以你会失去它。它们“性能更好”？它们根本不起作用！我无法从

react native手势处理程序
获取
onPress
处理程序的
TouchableOpacity
来执行
警报
或
控制台.log
。我从
react native
导入了它，这很有效。为什么在宇宙中有人会从react native手势处理程序导入TouchableOpacity？@RishavKumar你听说过自动导入吗？这应该是最糟糕的自动导入之一everTouchableNativeFeedback onPress不适用于Android，如果它有位置：“绝对”。TouchableNativeFeedback在Android上对我有效绝对位置。不适用于我在android上的绝对位置。我的海拔有问题。我有类似
@Bn.F76的问题，实际上我也有同样的问题。zIndex:1也没有解决我的问题，你找到解决方案了吗？有些时候真的很小的事情把整个团队搞得一团糟，感谢BuddyzIndex。对我来说，这解决了触摸事件的问题，但引入了许多其他样式/对齐问题。也就是说，我认为样式错误比使用react native的TouchableOpacity和debug和inspector禁用的TouchableOpacity更容易解决，或者您可以使用新的api
import { TouchableOpacity} from 'react-native-gesture-handler'