React Native中如何检测点击组件外区域以关闭自定义下拉选择框？

方案1：全屏透明蒙层实现（最简单，无额外依赖） #

这是最常用的实现方式，原理是下拉展开时渲染一个全屏的透明不可见层，点击该层就触发关闭，下拉组件本身的层级设置高于蒙层，保证点击下拉内部区域不会触发蒙层的关闭逻辑。
代码修改示例：

import { useState } from 'react';
import { View, TouchableOpacity, Text, TouchableWithoutFeedback } from 'react-native';

// 组件内部逻辑
const [isOpen, setIsOpen] = useState(false)
const toggle = () => { setIsOpen(!isOpen)}
const closeSelect = () => { setIsOpen(false)}

return (
  <View style={{ position: 'relative', zIndex: 100 }}>
    {/* 下拉触发按钮 */}
    <TouchableOpacity onPress={toggle}>
      <Text>Open select</Text>
    </TouchableOpacity>

    {/* 下拉展开时的蒙层和选项 */}
    {isOpen && (
      <>
        {/* 全屏透明蒙层，点击就关闭 */}
        <TouchableWithoutFeedback onPress={closeSelect}>
          <View style={{ 
            position: 'fixed', 
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 99,
            backgroundColor: 'transparent'
          }} />
        </TouchableWithoutFeedback>
        {/* 选项列表，层级高于蒙层 */}
        <View style={{ position: 'relative', zIndex: 101 }}>
          {options.map(({value, label}) => (
            <TouchableOpacity key={value} onPress={toggle}>
              <Text>{label}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </>
    )}
  </View>
)

注意：如果安卓端不支持position: fixed，可以把最外层父容器设置为占满屏幕的position: relative，蒙层改用position: absolute即可。另外你的原代码里选项用的是普通View组件，不会响应onPress事件，需要换成TouchableOpacity等可触摸组件。

方案2：坐标检测实现（类似Web的useRef方案） #

如果不想用蒙层，可以通过RN提供的组件测量方法判断点击区域：

• 给下拉组件的根容器绑定ref
• 下拉打开时监听全局的touchStart事件
• 点击时获取点击坐标，调用ref的measure方法获取组件在屏幕上的位置和宽高，判断点击坐标是否在组件范围内，不在就关闭

第三方库方案 #

如果不想自己封装，可以直接用成熟的下拉选择组件库，常用的有react-native-picker-select、@react-native-picker/picker，也可以用专门的点击外部检测库react-native-click-outside来实现逻辑复用。

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