React Native新手求教：如何为FlatList列表项添加点击三点按钮触发的可消失弹出菜单

阿华AIGC实验室

2026-4-30

Hey there!作为React Native新手，实现列表项右上角的三点菜单其实没你想的复杂，我来一步步给你拆解实现方案👇

核心思路

我们需要给FlatList的每一项单独绑定一个三点按钮和弹出菜单，通过状态控制菜单的显示/隐藏，同时处理菜单的定位逻辑。这里提供两种方案：一种是用React Native原生组件实现（无额外依赖），另一种是借助第三方库简化开发（更省心）。

方案一：原生组件实现（无依赖）

这种方案用TouchableOpacity做三点按钮，Modal做弹出层，通过测量按钮位置来定位菜单。

完整代码示例

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

// 列表项组件
const ListItem = ({ item }) => {
  // 控制菜单显示状态
  const [isMenuVisible, setIsMenuVisible] = useState(false);
  // 用来获取三点按钮的位置
  const buttonRef = useRef(null);
  // 存储菜单的定位坐标
  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });

  // 点击三点按钮时触发
  const handleButtonPress = () => {
    buttonRef.current.measure((_x, _y, _width, height, pageX, pageY) => {
      // 计算菜单位置：在按钮下方，向左偏移让菜单对齐按钮右侧
      setMenuPosition({
        top: pageY + height + 5,
        left: pageX - 110,
      });
      setIsMenuVisible(true);
    });
  };

  return (
    <View style={styles.listItemContainer}>
      {/* 列表项内容 */}
      <Text style={styles.itemText}>{item.title}</Text>
      {/* 三点按钮 */}
      <TouchableOpacity 
        ref={buttonRef} 
        onPress={handleButtonPress} 
        style={styles.menuButton}
      >
        <Text style={styles.menuButtonText}>⋮</Text>
      </TouchableOpacity>

      {/* 弹出菜单 */}
      {isMenuVisible && (
        <Modal 
          transparent 
          visible={isMenuVisible} 
          onRequestClose={() => setIsMenuVisible(false)}
        >
          {/* 点击遮罩层关闭菜单 */}
          <TouchableOpacity 
            style={styles.modalOverlay} 
            onPress={() => setIsMenuVisible(false)}
          >
            <View 
              style={[styles.menuContainer, { 
                top: menuPosition.top, 
                left: menuPosition.left 
              }]}
            >
              {/* 菜单选项 */}
              <TouchableOpacity 
                style={styles.menuItem} 
                onPress={() => {
                  console.log(`编辑 ${item.title}`);
                  setIsMenuVisible(false);
                }}
              >
                <Text>编辑</Text>
              </TouchableOpacity>
              <TouchableOpacity 
                style={styles.menuItem} 
                onPress={() => {
                  console.log(`删除 ${item.title}`);
                  setIsMenuVisible(false);
                }}
              >
                <Text>删除</Text>
              </TouchableOpacity>
            </View>
          </TouchableOpacity>
        </Modal>
      )}
    </View>
  );
};

// 主组件
const App = () => {
  // 模拟列表数据
  const listData = [
    { id: '1', title: '我的第一条动态' },
    { id: '2', title: '旅行计划清单' },
    { id: '3', title: '待办事项' },
  ];

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

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#f5f5f5',
  },
  listItemContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemText: {
    fontSize: 16,
    color: '#333',
  },
  menuButton: {
    padding: 8,
  },
  menuButtonText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#666',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  menuContainer: {
    position: 'absolute',
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5, // Android阴影
    width: 120,
  },
  menuItem: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

export default App;

关键细节说明

用useRef获取三点按钮的DOM节点，通过measure方法获取按钮在屏幕上的绝对位置，以此定位菜单；
Modal的transparent属性设置为true，配合半透明遮罩层实现点击外部关闭菜单的效果；
每个列表项独立维护自己的isMenuVisible状态，避免多个菜单同时弹出。

方案二：第三方库实现（更省心）

如果不想自己处理定位和遮罩逻辑，推荐使用react-native-popover-view，它会自动处理菜单的位置和交互。

步骤1：安装依赖

npm install react-native-popover-view --save
# 或者用yarn
yarn add react-native-popover-view

完整代码示例

import React, { useState, useRef } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import Popover from 'react-native-popover-view';

const ListItem = ({ item }) => {
  const [isPopoverVisible, setIsPopoverVisible] = useState(false);
  const buttonRef = useRef(null);

  return (
    <View style={styles.listItemContainer}>
      <Text style={styles.itemText}>{item.title}</Text>
      <TouchableOpacity 
        ref={buttonRef} 
        onPress={() => setIsPopoverVisible(true)} 
        style={styles.menuButton}
      >
        <Text style={styles.menuButtonText}>⋮</Text>
      </TouchableOpacity>

      {/* 第三方Popover组件 */}
      <Popover
        isVisible={isPopoverVisible}
        fromView={buttonRef.current}
        onRequestClose={() => setIsPopoverVisible(false)}
        placement="bottom" // 菜单显示在按钮下方
        backgroundColor="white"
        borderRadius={8}
      >
        <View style={styles.popoverContent}>
          <TouchableOpacity 
            style={styles.menuItem} 
            onPress={() => {
              console.log(`编辑 ${item.title}`);
              setIsPopoverVisible(false);
            }}
          >
            <Text>编辑</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            style={styles.menuItem} 
            onPress={() => {
              console.log(`删除 ${item.title}`);
              setIsPopoverVisible(false);
            }}
          >
            <Text>删除</Text>
          </TouchableOpacity>
        </View>
      </Popover>
    </View>
  );
};

// 主组件和样式和方案一基本一致，这里省略重复部分