react-native - 可触摸不透明度的 Onpress 不适用于“绝对”

Question

在我的本机应用程序中，我有居中文本和编辑图标的视图，我需要在此视图中启用点击功能。为此，我使用了TouchableOpacity's 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"
}

单击该功能时未触发。如果我position: "absolute"从 style( topBand) 中删除 , 它将起作用，但没有那个位置是不正确的。

问题是什么？我应该如何解决？

Answer 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"
}