React Native - TouchableOpacity无法在绝对定位的视图中工作

Question

我有一个绝对定位的View，它拥有3个TouchableOpacity组件而3个没有响应它们根本就不起作用，这里出了什么问题请帮助我：）

代码

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

截图

Answer 1

从“ react-native-gesture-handler”导入TouchableOpacity对我有用

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

Answer 2

即使标签栏在视觉上看起来位于列表中的内容之上，列表的触摸事件也可能在标签栏之前接收。将zIndex添加到选项卡栏以允许它首先接收触摸事件。

Answer 3

Dude只需将zIndex：1添加到包含按钮和动臂的视图中，在大多数情况下就可以完成。 另请注意，添加高程会在android按钮上添加阴影，有时如果将高程添加到父级而不是添加到子级，则子级按钮可能无法正常工作。（罕见情况）

例如：

buttonContainers:
  {
    zIndex: 1,
    alignSelf: 'flex-end',
    position: 'absolute',
    top:5,
    right: 5,
    height: 40,
    borderWidth: 1,
    justifyContent: 'center',
    alignContent: 'center',
    width: 80
  },

Answer 4

查看您的导入。 如果从'react-native-gesture-handler'导入{TouchableOpacity}；不起作用。 您需要从“ react-native”导入此

Answer 5

我通过在每个父级中添加flex：1并为每个父级添加了高度/宽度来解决此问题。还可以尝试使用flex：1将每个TouchableOpacity拉出到单独的视图中，并为子元素（文本）添加绝对位置。我在按钮上放了一个动画，所以可能有些不同。

Answer 6

遇到同样的问题，我在上面的@RishavKumar答案中使用了将zIndex: 1添加到您的TouchableOpacity的方法，对我有用。

Answer 7

如果onPress of TouchableOpacity不起作用，在这种情况下，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>
}

Answer 8

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

Answer 9

您的绝对元素可能位于相对元素中。如果要单击它，则应删除父相对规则。

Answer 10

我在Android应用中遇到了同样的问题。绝对元素不会触发任何事件。

使用Nouar建议的“ react-native-gesture-handler”就可以了。但我敢肯定为什么会这样。

我认为主要区别在于该库实现了本机代码，不再依赖JS。