如何在React Native中实现类似useOnClickOutside的功能

方法一：利用Pressable的onPressOutside属性 #

React Native的Pressable组件自带onPressOutside回调，专门处理点击组件外部的场景，这是最简便的实现方式。

示例代码：

import { useState } from 'react';
import { View, Pressable, Text, StyleSheet } from 'react-native';

const CollapsibleBlock = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  const handlePressOutside = () => {
    if (isExpanded) {
      setIsExpanded(false);
    }
  };

  return (
    <Pressable
      style={styles.container}
      onPressOutside={handlePressOutside}
    >
      <Pressable onPress={handleToggle} style={styles.toggleButton}>
        <Text>{isExpanded ? '收起' : '展开'}</Text>
      </Pressable>
      
      {isExpanded && (
        <View style={styles.expandedContent}>
          <Text>这里是展开后的内容</Text>
          <Text>可包含任意组件，比如文本、图片、按钮等</Text>
        </View>
      )}
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  toggleButton: {
    padding: 8,
    backgroundColor: '#e0e0e0',
    borderRadius: 4,
  },
  expandedContent: {
    marginTop: 12,
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 4,
  },
});

export default CollapsibleBlock;

注：点击展开内容内部的元素不会触发折叠，因为onPressOutside仅在点击完全超出Pressable范围的区域时触发。

方法二：自定义Hook实现全局触摸监听 #

如果场景不适合用Pressable，可以自定义类似Web端useOnClickOutside的Hook，通过监听全局触摸事件判断点击位置是否在目标元素外。

自定义Hook代码： #

import { useEffect, useRef } from 'react';
import { TouchableWithoutFeedback, AppState } from 'react-native';

const useOnPressOutside = (ref, handler) => {
  useEffect(() => {
    const handlePress = ({ nativeEvent }) => {
      if (!ref.current) return;
      
      // 获取目标元素的窗口坐标与尺寸
      ref.current.measureInWindow((x, y, width, height) => {
        const { pageX, pageY } = nativeEvent;
        // 判断点击位置是否在元素外部
        const isOutside = 
          pageX < x || 
          pageX > x + width || 
          pageY < y || 
          pageY > y + height;
        
        if (isOutside) {
          handler();
        }
      });
    };

    // 监听全局触摸结束事件
    const touchSubscription = TouchableWithoutFeedback.RCTEventEmitter.addListener(
      'topTouchEnd',
      handlePress
    );

    // 处理App切回前台的情况，避免状态不一致
    const handleAppStateChange = (nextState) => {
      if (nextState === 'active') {
        handler();
      }
    };
    const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      touchSubscription.remove();
      appStateSubscription.remove();
    };
  }, [ref, handler]);
};

export default useOnPressOutside;

使用Hook的示例： #

import { useState, useRef } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import useOnPressOutside from './useOnPressOutside';

const CustomCollapsibleBlock = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const contentRef = useRef(null);

  useOnPressOutside(contentRef, () => {
    if (isExpanded) {
      setIsExpanded(false);
    }
  });

  return (
    <View style={styles.container}>
      <Pressable onPress={() => setIsExpanded(!isExpanded)} style={styles.toggleButton}>
        <Text>{isExpanded ? '收起' : '展开'}</Text>
      </Pressable>
      
      {isExpanded && (
        <View ref={contentRef} style={styles.expandedContent}>
          <Text>自定义Hook实现的展开内容</Text>
          <Text>点击外部任意区域都会收起</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  toggleButton: {
    padding: 8,
    backgroundColor: '#e0e0e0',
    borderRadius: 4,
  },
  expandedContent: {
    marginTop: 12,
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 4,
  },
});

export default CustomCollapsibleBlock;

注意事项 #

• 页面包含ScrollView时，可添加keyboardShouldPersistTaps="handled"属性确保触摸事件正常传递。
• 自定义Hook需注意元素动态布局变化的场景，可在布局更新时重新获取元素位置。
• 安卓设备可能存在触摸事件兼容性问题，可测试后调整判断逻辑。

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