React Native TouchableOpacity 不适用于绝对位置答案

【问题标题】：React Native TouchableOpacity not working with position absoluteReact Native TouchableOpacity 不适用于绝对位置
【发布时间】：2020-06-27 02:33:48
【问题描述】：

我有一个显示与用户输入匹配的结果的列表。 touchableOpacity 的 onPress 在此列表中不起作用。此列表绝对定位并位于其父视图下方（相对定位）。只有当我从列表中删除 top:48 样式并且 onPress 适用于直接位于父级顶部的单个元素时，我才能让 onPress 工作。

export default function IndoorForm(props) {
return (
    <View style={styles.container}>
      <View style={styles.parent}>
        <Autocomplete
          style={styles.autocomplete}
          autoCompleteValues={autoCompleteValues}
          selectedLocation={props.getDestination}
        ></Autocomplete>
      </View>
    </View>
);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: "center",
    position: "absolute",
    top: Platform.OS === "android" ? 25 + 48 : 0 + 48,
    width: Dimensions.get("window").width - 30,
    zIndex: 500
  },
  parent: {
    position: "relative",
    flex: 1,
    borderWidth: 2,
    borderColor: "#AA2B45",
    height: 48,
    backgroundColor: "#fff",
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 16,
    paddingRight: 16,
    justifyContent: "space-between"
  }
}

export default function AutoComplete(props: AutoCompleteProps) {
  const { autoCompleteValues } = props;

  return (
    <View style={styles.container}>
      <FlatList
        data={autoCompleteValues}
        renderItem={({ item }: { item: POI }) => (
          <TouchableOpacity onPress={() => console.log("Haal")} key={item.displayName} style={styles.list}>
            <Text style={styles.text}>{item.displayName}</Text>
            <Entypo name={"chevron-thin-right"} size={24} color={"#454F63"} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    flex: 1,
    width: Dimensions.get("window").width - 30,
    top: 48,
    borderWidth: 2,
    borderColor: "#F7F7FA",
    backgroundColor: "#F7F7FA",
    zIndex: 999
  },
  list: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: 15,
    paddingLeft: 10,
    paddingBottom: 10,
    borderBottomColor: "rgba(120, 132, 158, 0.08)",
    borderBottomWidth: 1.4,
    zIndex: 999
  }
}

【问题讨论】：

为什么要将父元素（容器）绝对设置为子元素（父元素）？尝试为您的元素添加背景颜色以查看它们在屏幕上覆盖的内容，以便确保您的 touchableopacity 环绕列表元素。
父级具有绝对值，因为它位于地图视图组件之上。所以我绝对定位它，所以它可以在上面。我的可触摸元素已经有了背景颜色和边框。问题是当我将手指移到可触摸设备上时，我可以将地图移动到可触摸设备后面。

标签： javascript reactjs react-native react-native-android touchableopacity

【解决方案1】：

我知道你已经解决了你的问题，但是你可以使用这个神奇的库react-native-gesture-handler，从那里导入你的Touchables，他们不关心在父视图中。无论如何，您都可以触摸它们。

【讨论】：

我在其他堆栈溢出帖子中看到这个库中的这个可触摸对象有问题。就我而言，它也不起作用。
成功了。但我想知道，这背后的原因是什么？
这对我有用，谢谢。就我而言，屏幕上隐藏了可触摸的组件，当它出现时，它无法按下......然后我使用手势处理程序中的 TouchableOpacity 并且一切正常，你知道为什么吗？

【解决方案2】：

通过动态调整容器高度使 touchableOpacity 在容器内解决了这个问题。问题是我将列表定位在父级之外（按照样式的预期），但要让 onPress 工作，它必须在父级内部。

  let autocompleteHeight = autoCompleteValues.length * 65

<View style={[styles.container, {height: autocompleteHeight}]}>

【讨论】：