React Native TouchableOpacity 不適用於絕對位置

Question

我有一個列表，顯示與用戶輸入匹配的結果。 touchableOpacity 的 onPress 在此列表中不起作用。 此列表絕對定位並定位在其父視圖下方（定位相對）。 我可以讓 onPress 工作的唯一時間是當我從列表中刪除top:48樣式並且 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
  }
}

Answer 1

我知道你已經解決了你的問題，但是你可以使用這個神奇的庫react-native-gesture-handler ，從那里導入你的Touchable s，他們不關心在父視圖中。 無論如何，您都可以觸摸它們。

Answer 2

通過動態調整容器高度來解決此問題，以便 touchableOpacity 位於容器內。 問題是我將列表定位在父級之外（按照樣式的意圖），但要使 onPress 工作，它必須在父級內。

  let autocompleteHeight = autoCompleteValues.length * 65

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