Javascript React Native TouchableOpacity不使用绝对位置

我有一个列表，显示与用户输入匹配的结果。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
  }
}

  let autocompleteHeight = autoCompleteValues.length * 65

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

导出默认函数IndoorForm（props）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对准自己：“居中”，
位置：“绝对”，
top:Platform.OS===“android”？25+48:0+48，
宽度：尺寸。获取（“窗口”）。宽度-30，
zIndex:500
},
家长：{
职位：“相对”，
弹性：1，
边界宽度：2，
边框颜色：#AA2B45“，
身高：48，
背景颜色：“fff”，
flexDirection:“行”，
对齐项目：“中心”，
paddingLeft:16，
paddingRight:16，
为内容辩护：“之间的空间”
}
}
导出默认函数自动完成（道具：AutoCompleteProps）{
常量{autoCompleteValues}=props；
返回(
(
console.log（“Haal”）}key={item.displayName}style={styles.list}>
{item.displayName}
)}
/>
);
}
const styles=StyleSheet.create({
容器：{
位置：“绝对”，
弹性：1，
宽度：尺寸。获取（“窗口”）。宽度-30，
前48名，
边界宽度：2，
边框颜色：“F7F7FA”，
背景色：“F7F7FA”，
zIndex:999
},
名单：{
flexDirection:“行”，
对齐项目：“中心”，
辩护内容：“间隔空间”，
paddingTop:15，
paddingLeft:10，
填充底部：10，
borderBottomColor:“rgba（1201321580.08）”，
边框底部宽度：1.4，
zIndex:999
}
}

通过动态调整容器高度，使touchableOpacity位于容器内，解决了这一问题。问题是我将列表定位在父级之外（按照样式设置的意图），但要使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
  }
}

  let autocompleteHeight = autoCompleteValues.length * 65

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

让autocompleteHeight=autoCompleteValues.length*65

通过动态调整容器高度，使touchableOpacity位于容器内，解决了这一问题。问题是我将列表定位在父级之外（按照样式设置的意图），但要使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
  }
}

  let autocompleteHeight = autoCompleteValues.length * 65

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

让autocompleteHeight=autoCompleteValues.length*65

我知道你已经解决了你的问题，但是你可以使用这个神奇的库

react native手势处理程序

，从那里导入你的

可触摸的

，它们不在乎是否在父视图中。你可以触摸它们。我知道你已经解决了你的问题，但是你可以使用这个神奇的库

>react原生手势处理程序

，从那里导入可触摸的，它们不关心是否在父视图中。您可以随意触摸它们。

为什么将父元素（容器）绝对值设置为子元素（父元素）？尝试给你的元素背景色，看看它们在屏幕上覆盖了什么，这样你就可以确保你的touchableopacity环绕列表元素。父元素是绝对的，因为它位于mapview组件的顶部。所以我绝对定位它，这样它就可以在顶部。我的touchable元素已经有了背景色和边框。问题是当我在触摸屏上移动手指时，我可以将地图移到触摸屏后面。为什么要将父元素（容器）绝对值设置为子元素（父元素）？尝试给你的元素背景色，看看它们在屏幕上覆盖了什么，这样你就可以确保你的touchableopacity环绕列表元素。父元素是绝对的，因为它位于mapview组件的顶部。所以我绝对定位它，这样它就可以在顶部。我的touchable元素已经有了背景色和边框。问题是s当我在触摸屏上移动手指时，我可以将地图移到触摸屏后面。我在其他堆栈溢出帖子中看到，这个库中的触摸屏有问题。在我的情况下，它也不起作用。它起作用了。但我想知道，这背后的原因是什么？这对我有效谢谢。在我的情况下，有一些触摸屏组件隐藏在scre之外嗯，当它出现时，它不会被按下…然后我使用手势处理程序中的TouchableOpacity，一切都正常，你知道为什么吗？我在其他堆栈溢出帖子中看到，这个库中的touchables出现了问题。在我的情况下，它也不起作用。它起作用了。但我想知道，这背后的原因是什么？这对我有效，谢谢。在我的文章中在这种情况下，屏幕上隐藏着可触摸组件，当它出现时，它不会被按下…然后我使用手势处理程序中的可触摸不透明度，一切正常，你知道为什么吗？