React Native中document变量使用及外部点击关闭下拉菜单方案

嘿，这个问题我太熟了！React Native里确实没有Web端的document对象，但咱们有专门的原生方案来实现点击SearchBar外部关闭下拉菜单的需求，给你整理几个靠谱的方法：

这个方法简单直接，不需要依赖任何第三方库，核心思路是当下拉菜单展开时，在页面最底层加一个全屏的透明遮罩，点击遮罩就触发关闭菜单的逻辑，同时让下拉菜单的层级高于遮罩，这样点击菜单内部不会触发关闭。

代码示例：

class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDropdownOpen: false
    };
    this.closeDropdown = this.closeDropdown.bind(this);
  }

  closeDropdown() {
    this.setState({ isDropdownOpen: false });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 页面其他内容 */}
        <SearchBar 
          onFocus={() => this.setState({ isDropdownOpen: true })}
          // 你的SearchBar其他属性
        />
        
        {/* 下拉菜单与遮罩组合 */}
        {this.state.isDropdownOpen && (
          <>
            {/* 全屏透明遮罩，点击关闭菜单 */}
            <TouchableWithoutFeedback onPress={this.closeDropdown}>
              <View style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'rgba(0,0,0,0.01)' // 几乎完全透明，不影响视觉
              }} />
            </TouchableWithoutFeedback>
            
            {/* 下拉菜单，层级高于遮罩 */}
            <View style={{
              position: 'absolute',
              top: 60, // 根据你的SearchBar位置调整top值
              left: 10,
              right: 10,
              backgroundColor: 'white',
              elevation: 5, // 安卓添加阴影
              shadowColor: '#000', // iOS添加阴影
              shadowOffset: { width: 0, height: 2 },
              shadowOpacity: 0.2,
              shadowRadius: 3
            }}>
              {/* 这里放你的下拉菜单内容 */}
            </View>
          </>
        )}
      </View>
    );
  }
}

React Native的Pressable是官方推荐的触摸交互组件，配合pointerEvents属性可以控制元素是否响应触摸事件，实现点击外部关闭的效果。

代码示例：

class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDropdownOpen: false
    };
  }

  render() {
    return (
      <Pressable
        style={{ flex: 1 }}
        onPress={() => this.state.isDropdownOpen && this.setState({ isDropdownOpen: false })}
      >
        <View 
          style={{ flex: 1 }} 
          pointerEvents={this.state.isDropdownOpen ? 'box-none' : 'auto'}
        >
          {/* 页面其他内容 */}
          <SearchBar 
            onFocus={() => this.setState({ isDropdownOpen: true })}
          />
          
          {this.state.isDropdownOpen && (
            <View 
              style={{
                position: 'absolute',
                top: 60,
                left: 10,
                right: 10,
                backgroundColor: 'white',
                elevation: 5
              }}
              pointerEvents='auto' // 确保菜单本身能响应触摸
            >
              {/* 下拉菜单内容 */}
            </View>
          )}
        </View>
      </Pressable>
    );
  }
}

原理说明：当菜单展开时，根View的pointerEvents设为box-none，这样触摸事件会穿透到外层的Pressable，触发关闭逻辑；而菜单本身设为auto，保证点击菜单内部不会触发关闭。

如果你的页面有更复杂的手势交互需求，可以使用react-native-gesture-handler库的TapGestureHandler来监听全局点击事件。

首先需要安装库：

npm install react-native-gesture-handler
# 或者用yarn
yarn add react-native-gesture-handler

代码示例：

import { TapGestureHandler, State } from 'react-native-gesture-handler';

class Products extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDropdownOpen: false
    };
  }

  onTap = ({ nativeEvent }) => {
    // 当手势状态为ACTIVE（即点击完成）且菜单展开时，关闭菜单
    if (nativeEvent.state === State.ACTIVE && this.state.isDropdownOpen) {
      this.setState({ isDropdownOpen: false });
    }
  };

  render() {
    return (
      <TapGestureHandler onHandlerStateChange={this.onTap}>
        <View style={{ flex: 1 }}>
          {/* 页面其他内容 */}
          <SearchBar onFocus={() => this.setState({ isDropdownOpen: true })} />
          
          {this.state.isDropdownOpen && (
            <View 
              style={{
                position: 'absolute',
                top: 60,
                left: 10,
                right: 10,
                backgroundColor: 'white',
                elevation: 5
              }}
            >
              {/* 下拉菜单内容 */}
            </View>
          )}
        </View>
      </TapGestureHandler>
    );
  }
}

以上三个方案里，方案一最适合大多数常规场景，实现成本低且逻辑清晰，你可以根据自己的项目需求选择~

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