FlatList中嵌套TouchableOpacity的自定义下拉菜单点击异常问题

我想不依赖第三方库实现自定义下拉菜单，于是用TouchableOpacity卡片组成FlatList，给每个卡片加了三点下拉菜单，但下拉菜单超出卡片区域的部分无法点击。当前逻辑是通过ID判断控制菜单显示，卡片本身是可触摸组件，内部嵌套触发下拉的TouchableOpacity。

问题原因 #

1. 父容器是固定高度70的TouchableOpacity，React Native中这类触摸容器会裁剪超出自身边界的子元素触摸事件，导致下拉菜单超出部分无法响应点击。
2. 父TouchableOpacity的onPress会和子三点菜单的点击事件冲突，点击三点时会触发父容器的点击逻辑，导致菜单状态混乱。

解决方案 #

1. 将卡片的父容器从TouchableOpacity改为普通View，只把需要点击的区域（如标题、地址）单独做成TouchableOpacity，避免整个卡片作为触摸容器拦截事件。
2. 给三点菜单的点击事件添加事件阻止冒泡，避免触发父区域的点击逻辑。
3. 保持下拉菜单的绝对定位，但将其放在父View内部，确保触摸事件不受父容器边界限制。

修改后的完整代码 #

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

const Card = () => {
  const [sideBar, setSideBar] = useState({
    visibility: false,
    id: '',
  });

  // 切换菜单显示状态
  const toggleMenu = (itemId) => {
    setSideBar(prev => ({
      visibility: prev.id !== itemId || !prev.visibility,
      id: itemId,
    }));
  };

  // 关闭菜单
  const closeMenu = () => {
    setSideBar({ visibility: false, id: '' });
  };

  const renderItem = ({ item }) => {
    const isMenuOpen = sideBar.visibility && sideBar.id === item.id;

    return (
      <View
        style={[
          isMenuOpen ? { backgroundColor: '#fff' } : {},
          styles.cardContainer,
        ]}>
        {/* 可点击的卡片内容区域 */}
        <TouchableOpacity
          style={styles.cardContent}
          onPress={() => toggleMenu(item.id)}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.address}>1339 Arling Drive ODGEN, UT 84403</Text>
        </TouchableOpacity>

        {/* 三点菜单触发按钮 */}
        <TouchableOpacity
          style={styles.menuTrigger}
          onPress={(e) => {
            e.stopPropagation(); // 阻止事件冒泡
            toggleMenu(item.id);
          }}>
          <Image
            style={{ width: 30, height: 30 }}
            source={require('../../assets/dots-vertical-512.webp')}
          />
        </TouchableOpacity>

        {/* 下拉菜单 */}
        {isMenuOpen && (
          <View style={styles.dropdownMenu}>
            <TouchableOpacity
              onPress={() => {
                alert('发送短信');
                closeMenu();
              }}
              style={styles.menuItem}>
              <Text style={styles.menuItemText}>Send Text Message</Text>
              <Image
                style={{ width: 20, height: 20 }}
                source={require('../../assets/chat.png')}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                alert('发送短信');
                closeMenu();
              }}
              style={styles.menuItem}>
              <Text style={styles.menuItemText}>Send Text Message</Text>
              <Image
                style={{ width: 20, height: 20 }}
                source={require('../../assets/chat.png')}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                alert('发送短信');
                closeMenu();
              }}
              style={styles.menuItem}>
              <Text style={styles.menuItemText}>Send Text Message</Text>
              <Image
                style={{ width: 20, height: 20 }}
                source={require('../../assets/chat.png')}
              />
            </TouchableOpacity>
          </View>
        )}
      </View>
    );
  };

  const DATA = [
    { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item' },
    { id: '1', title: 'Second Item' },
    { id: '2', title: 'Third Item' },
    { id: '3', title: 'Third Item' },
    { id: '4', title: 'Third Item' },
    { id: '5', title: 'Third Item' },
    { id: '6', title: 'Third Item' },
    { id: '7', title: 'Third Item' },
    { id: '8', title: 'Third Item' },
    { id: '9', title: 'Third Item' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

export default Card;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  cardContainer: {
    borderWidth: 1,
    height: 70,
    marginVertical: 8,
    marginHorizontal: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderRadius: 10,
    position: 'relative', // 确保下拉菜单相对于卡片定位
  },
  cardContent: {
    flex: 1,
    paddingHorizontal: 6,
  },
  title: {
    fontSize: 17,
    fontWeight: 'bold',
  },
  address: {
    fontSize: 12,
    marginTop: 2,
  },
  menuTrigger: {
    paddingHorizontal: 10,
  },
  dropdownMenu: {
    position: 'absolute',
    width: 190,
    top: 60,
    right: 10,
    borderWidth: 1,
    backgroundColor: 'red',
    padding: 5,
    borderRadius: 5,
  },
  menuItem: {
    flexDirection: 'row',
    height: 30,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    marginBottom: 5,
    borderRadius: 15,
    backgroundColor: '#abcdef',
  },
  menuItemText: {
    fontSize: 13,
    color: '#000',
  },
});

关键修改点 #

• 将卡片父容器改为View，避免整个卡片作为触摸容器拦截超出部分的事件。
• 给三点菜单的点击事件添加e.stopPropagation()，防止触发卡片内容区域的点击逻辑。
• 下拉菜单的父容器设置position: 'relative'，确保绝对定位的菜单相对于卡片正确摆放。
• 优化菜单状态切换逻辑，点击菜单项后自动关闭菜单，提升交互体验。

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