React Native TouchableOpacity не работает с абсолютной позицией

Question

У меня есть список, который показывает результаты, соответствующие вводу пользователя. OnPress touchableOpacity не работает в этом списке. Этот список позиционируется абсолютно и позиционируется ниже родительского представления (позиционируется относительно). Единственный раз, когда я могу заставить работать 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 оттуда, и им не важно находиться внутри родительских представлений. Вы можете прикоснуться к ним независимо.

Answer 2

Решено это путем динамической регулировки высоты контейнера так, чтобы touchableOpacity был внутри контейнера. Проблема заключалась в том, что я поместил список за пределы родительского (как и предполагалось стилем), но для работы onPress он должен быть внутри родительского.

  let autocompleteHeight = autoCompleteValues.length * 65

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