React Native中如何检测View外部点击以关闭Popover

要实现点击弹窗外部关闭的功能，核心是在弹窗显示时添加一个全屏的底层点击区域，同时阻止弹窗内部的点击事件冒泡到底层。以下是修改后的完整代码：

import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";

import styles from "./styles";
import { IBlock } from "../../types/models";
import { HomeNavigationProp } from "../../types/navigation";

type Props = {
  block: IBlock;
};

const Block = ({ block }: Props) => {
  const [currentLessonIndex, setCurrentLessonIndex] = useState(0);
  const [progress, setProgress] = useState(0);
  const [popoverVisible, setPopoverVisible] = useState(false);

  const navigation = useNavigation<HomeNavigationProp>();

  const handlePressOutside = () => {
    setPopoverVisible(false);
  };

  const onPopoverButtonPress = () => {
    setPopoverVisible(false);
    navigation.navigate("Lesson");
  };

  const onNextLesson = () => {};

  return (
    <View>
      <Pressable onPress={() => setPopoverVisible(true)} style={styles.blockBox}>
        <Text style={styles.boxText}>{block.blockName}</Text>
        <Text style={styles.boxText}>
          {progress} / {block.lessons.length}
        </Text>
      </Pressable>

      {popoverVisible && (
        {/* 全屏底层点击区域，点击此处关闭弹窗 */}
        <Pressable 
          style={{
            flex: 1,
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 1,
          }}
          onPress={handlePressOutside}
        >
          {/* 弹窗容器，阻止内部点击事件冒泡 */}
          <Pressable 
            style={styles.popoverBox}
            onPress={(e) => e.stopPropagation()}
          >
            <Text style={styles.popoverTitle}>{block.blockName}</Text>
            <Text style={styles.popoverText}>
              Lesson {currentLessonIndex + 1} of {block.lessons.length}
            </Text>
            <Pressable onPress={onPopoverButtonPress} style={styles.popoverButton}>
              <Text style={styles.buttonText}>Start</Text>
            </Pressable>
          </Pressable>
        </Pressable>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  blockBox: {
    width: 100,
    aspectRatio: 1,
    alignSelf: "center",
    marginBottom: 15,
    padding: 10,
    justifyContent: "center",
    borderRadius: 50,
    backgroundColor: colors.orange50,
  },
  boxText: {
    fontFamily: "mainMed",
    fontSize: 14,
    textAlign: "center",
    color: colors.white,
  },
  popoverBox: {
    position: "absolute",
    alignSelf: "center",
    top: 90,
    zIndex: 2,
    width: "80%",
    borderRadius: 18,
    padding: 10,
    backgroundColor: colors.green50,
  },
  popoverTitle: {
    fontFamily: "mainBold",
    fontSize: 16,
    color: colors.white,
  },
  popoverText: {
    fontFamily: "mainMed",
    fontSize: 16,
    color: colors.white,
  },
  popoverButton: {
    borderRadius: 20,
    padding: 10,
    marginTop: 10,
    alignSelf: "stretch",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: colors.white,
  },
  buttonText: {
    fontFamily: "mainBold",
    fontSize: 16,
    color: colors.green50,
  },
});

export default Block;

关键修改点： #

• 添加全屏Pressable作为弹窗父容器，覆盖整个屏幕，点击该区域触发关闭逻辑。
• 将弹窗外层View替换为Pressable，通过e.stopPropagation()阻止内部点击事件冒泡，避免点击弹窗内部误触关闭。
• 调整层级：全屏容器zIndex设为1，弹窗保持zIndex:2，确保弹窗显示在顶层。

内容的提问来源于stack exchange，提问作者Takodana