可触摸不透明度的 Onpress 不适用于“绝对”答案

【问题标题】：Onpress of touchableopacity is not working with "absolute"可触摸不透明度的 Onpress 不适用于“绝对”
【发布时间】：2020-09-30 23:34:02
【问题描述】：

在我的 React Native 应用程序中，我有居中文本和编辑图标的视图，我需要在此视图中启用点击功能。为此，我使用了TouchableOpacity 的onPress。在我的风格中，我需要绝对位置。那么我的onPress 不工作了。

我有这样的代码：

     <TouchableOpacity
        style={styles.topBand}
        onPress={this._editPatientInfo}
      >
        <View style={styles.topView}>
          <View style={{ flex: 1 }}>
            <Text style={styles.topTitle}>{topTitle}</Text>
          </View>
          <View style={{ alignSelf: "flex-end" }}></View>
          <Icon
            pencil
            name="pencil"
            type="font-awesome"
            size={20}
            onPress={ this._editPatientInfo}
          />
        </View>
      </TouchableOpacity>

风格：

topBand: {
    width: "100%",
    position: "absolute",
    top: 0,
    alignItems: "center",
    padding: 5,
    backgroundColor: Colors.topBandColor
}
topView: {
    flexDirection: "row",
    alignItems: "center"
}

当点击功能没有被触发时。如果我从样式（topBand）中删除position: "absolute"，它会起作用，但没有那个位置是不正确的。

有什么问题？我该如何解决？

【问题讨论】：

标签： react-native position absolute touchableopacity onpress

【解决方案1】：

您需要使用具有绝对位置的视图包装您的 touchableOpacity 那么它可能会起作用

<View style={styles.wrapper}>

 <TouchableOpacity
        style={styles.topBand}
        onPress={this._editPatientInfo}
      >
        <View style={styles.topView}>
          <View style={{ flex: 1 }}>
            <Text style={styles.topTitle}>{topTitle}</Text>
          </View>
          <View style={{ alignSelf: "flex-end" }}></View>
          <Icon
            pencil
            name="pencil"
            type="font-awesome"
            size={20}
            onPress={ this._editPatientInfo}
          />
        </View>
      </TouchableOpacity>
</View>

wrapper:{
    width: "100%",
    position: "absolute",
    top: 0,
},
topBand: {
    alignItems: "center",
    padding: 5,
    backgroundColor: Colors.topBandColor
}
topView: {
    flexDirection: "row",
    alignItems: "center"
}

【讨论】：

感谢您的回复。但不幸的是它不起作用......