Question

在我的本地本机应用程序中，我有一个带有居中文本的视图和一个编辑图标，我需要在此视图中启用单击功能。为此，我使用了TouchableOpacity的{{1}}。以我的风格，我需要绝对的位置。然后我的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"，它将起作用，但如果没有，则位置不正确。

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

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

对touchableopacity的按下不适用于“绝对”

1 个答案: