如何在Expo React Native中实现点击三点弹出选项弹窗并点击别处关闭

以下是实现你需求的具体方案，完全贴合你想要的弹窗样式：

核心思路 #

用绝对定位的自定义弹窗配合触摸事件控制显示/隐藏，同时通过全屏触摸容器实现点击外部关闭的逻辑，不需要依赖第三方库，用Expo自带的核心组件就能完成。

完整代码实现 #

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

const { width: SCREEN_WIDTH } = Dimensions.get('window');

const OptionsMenuDemo = () => {
  const [isMenuVisible, setIsMenuVisible] = useState(false);

  // 切换菜单显示状态
  const toggleMenu = () => {
    setIsMenuVisible(!isMenuVisible);
  };

  // 关闭菜单
  const closeMenu = () => {
    if (isMenuVisible) setIsMenuVisible(false);
  };

  // 处理菜单选项点击
  const handleOptionPress = (option) => {
    console.log(`点击了：${option}`);
    closeMenu();
  };

  return (
    <TouchableWithoutFeedback onPress={closeMenu}>
      <View style={styles.container}>
        {/* 三点按钮 */}
        <TouchableOpacity 
          style={styles.menuButton} 
          onPress={(e) => {
            e.stopPropagation(); // 阻止事件冒泡，避免触发外部关闭
            toggleMenu();
          }}
        >
          <Text style={styles.buttonText}>⋮</Text>
        </TouchableOpacity>

        {/* 弹出菜单 */}
        {isMenuVisible && (
          <View style={styles.menuContainer}>
            <TouchableOpacity 
              style={styles.menuItem} 
              onPress={() => handleOptionPress('编辑')}
            >
              <Text style={styles.menuItemText}>编辑</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.menuItem} 
              onPress={() => handleOptionPress('删除')}
            >
              <Text style={styles.menuItemText}>删除</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.menuItem} 
              onPress={() => handleOptionPress('分享')}
            >
              <Text style={styles.menuItemText}>分享</Text>
            </TouchableOpacity>
          </View>
        )}
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  menuButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android阴影
  },
  buttonText: {
    fontSize: 24,
    color: '#333',
  },
  menuContainer: {
    position: 'absolute',
    bottom: 70, // 距离按钮的位置，可根据需求调整
    right: 20,
    width: 160,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 5,
    overflow: 'hidden', // 确保圆角生效
  },
  menuItem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  menuItemText: {
    fontSize: 16,
    color: '#333',
  },
});

export default OptionsMenuDemo;

关键细节说明 #

1. 点击外部关闭：用TouchableWithoutFeedback包裹整个页面容器，点击时触发closeMenu，但按钮点击时通过e.stopPropagation()阻止事件冒泡，避免刚打开就关闭。
2. 样式匹配：菜单用绝对定位放在按钮上方/旁边，添加阴影、圆角、分隔线，完全贴合你需要的样式效果。
3. 自定义扩展：可以根据需求调整菜单的位置、宽度、选项内容，还能添加Animated组件实现弹出/收起的过渡动画，比如：

// 示例：添加淡入动画
import { Animated } from 'react-native';

// 在组件内初始化动画值
const menuOpacity = useRef(new Animated.Value(0)).current;

// 切换菜单时触发动画
const toggleMenu = () => {
  setIsMenuVisible(!isMenuVisible);
  Animated.timing(menuOpacity, {
    toValue: isMenuVisible ? 0 : 1,
    duration: 200,
    useNativeDriver: true,
  }).start();
};

// 菜单组件替换为Animated.View
<Animated.View style={[styles.menuContainer, { opacity: menuOpacity }]}>
  {/* 菜单选项 */}
</Animated.View>

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