如何在React Native(Expo)中实现点击任意区域关闭react-native-collapsible

针对你用react-native-collapsible组件的需求，直接给你基于官方Lorem示例修改的实现代码和思路：

核心思路 #

在RN里没法直接像web那样通过!event.target判断点击区域，我们可以用全屏透明遮罩的方式：当面板展开时，在页面渲染一个覆盖全屏的可点击组件，点击这个遮罩就关闭面板，同时让面板本身显示在遮罩上方，避免点击面板内部误触发关闭。

修改后的完整代码 #

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Pressable, StyleSheet } from 'react-native';
import Collapsible from 'react-native-collapsible';

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

  // 关闭面板的逻辑
  const closePanel = () => {
    if (isExpanded) setIsExpanded(false);
  };

  return (
    <View style={styles.container}>
      {/* 展开状态下显示全屏遮罩 */}
      {isExpanded && (
        <Pressable 
          style={styles.fullscreenMask} 
          onPress={closePanel} 
        />
      )}

      {/* 原有的面板触发按钮和折叠内容 */}
      <View style={styles.panelContainer}>
        <TouchableOpacity 
          onPress={() => setIsExpanded(!isExpanded)}
          style={styles.toggleBtn}
        >
          <Text>点击展开/折叠面板</Text>
        </TouchableOpacity>
        <Collapsible collapsed={!isExpanded}>
          <Text style={styles.panelContent}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Text>
        </Collapsible>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  // 全屏遮罩样式：绝对定位覆盖整个屏幕，透明背景不影响视觉
  fullscreenMask: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0)',
    zIndex: 1,
  },
  // 面板容器设更高的zIndex，确保在遮罩上方
  panelContainer: {
    zIndex: 2,
  },
  toggleBtn: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  panelContent: {
    marginTop: 15,
    lineHeight: 20,
  },
});

export default LoremExample;

额外说明 #

1. 如果需要点击任意区域（包括面板内部）都关闭面板，只需要把panelContainer的zIndex删掉，让遮罩的层级比面板高即可。
2. 如果页面里有ScrollView这类滚动组件，可以给它加scrollEnabled={!isExpanded}，避免展开面板时还能滚动页面。
3. 也可以用TouchableWithoutFeedback替代Pressable，效果完全一致，Pressable是RN官方推荐的新组件，支持更多交互状态。

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