React Native中如何实现FlatList长按项前置高亮及下方弹窗？

实现思路 #

• 通过状态记录选中的消息项与操作框的显示状态
• 长按消息项时，将选中项移至列表首位实现前置效果
• 在列表下方根据选中状态渲染操作框，提供对应的操作选项

修改后的完整代码 #

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

export const Screen = () => {
  const [originalData] = useState([
    { id: '1', title: "test1", text: "text1" },
    { id: '2', title: "test2", text: "text2" },
    { id: '3', title: "test3", text: "text3" },
    { id: '4', title: "test4", text: "text4" },
    { id: '5', title: "test5", text: "text5" },
  ]);
  // 记录选中的消息项
  const [selectedItem, setSelectedItem] = useState(null);
  // 控制操作框显示
  const [showActionBox, setShowActionBox] = useState(false);

  // 根据选中项重新排序数据，实现选中项前置
  const sortedData = useMemo(() => {
    if (!selectedItem) return originalData;
    // 把选中项放在最前面，其余项按原顺序排列
    return [
      selectedItem,
      ...originalData.filter(item => item.id !== selectedItem.id)
    ];
  }, [selectedItem, originalData]);

  // 长按事件处理
  const handleLongPress = (item) => {
    setSelectedItem(item);
    setShowActionBox(true);
  };

  // 操作框按钮点击事件
  const handleAction = (actionType) => {
    console.log(`执行${actionType}操作，目标项：`, selectedItem);
    // 根据操作类型执行对应逻辑，比如删除、标记已读等
    if (actionType === 'delete') {
      // 这里可以添加删除逻辑
    }
    // 重置选中状态
    setSelectedItem(null);
    setShowActionBox(false);
  };

  const Card = ({ item }) => {
    // 给选中项添加特殊样式标识
    const isSelected = selectedItem?.id === item.id;
    return (
      <TouchableOpacity
        style={[styles.card, isSelected && styles.selectedCard]}
        onLongPress={() => handleLongPress(item)}
      >
        <Text>{item.title}</Text>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={sortedData}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Card item={item} />}
      />
      {/* 操作框 */}
      {showActionBox && (
        <View style={styles.actionBox}>
          <TouchableOpacity
            style={styles.actionBtn}
            onPress={() => handleAction('delete')}
          >
            <Text style={styles.actionBtnText}>删除消息</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.actionBtn}
            onPress={() => handleAction('markRead')}
          >
            <Text style={styles.actionBtnText}>标记已读</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.actionBtn}
            onPress={() => {
              setShowActionBox(false);
              setSelectedItem(null);
            }}
          >
            <Text style={styles.actionBtnText}>取消</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  card: {
    padding: 16,
    rowGap: 8,
    borderWidth: 2,
    borderColor: "black",
    margin: 16,
    borderRadius: 16,
    backgroundColor: '#fff',
  },
  selectedCard: {
    borderColor: '#2196F3',
    backgroundColor: '#E3F2FD',
  },
  actionBox: {
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#f5f5f5',
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
  actionBtn: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: '#2196F3',
    borderRadius: 8,
  },
  actionBtnText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
  },
});

关键逻辑说明 #

1. 数据排序：使用useMemo监听选中项变化，将选中项从原数组中提取并放在首位，保证每次选中后列表自动更新顺序
2. 长按触发：在TouchableOpacity上绑定onLongPress事件，触发时记录选中项并显示操作框
3. 选中标识：给选中的列表项添加特殊样式，让用户直观看到当前选中的项
4. 操作框交互：操作框提供具体功能按钮，点击后执行对应逻辑并重置选中状态，隐藏操作框

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