React Native列表项选中高亮：复用删除函数实现选中功能

嘿，刚好你的需求可以很巧妙地复用现有逻辑来实现！我分单选和多选两种常见场景给你讲清楚怎么修改代码：

一、单选场景（一次只能选中一个列表项） #

首先我们需要调整状态的存储形式——单选只需要记录当前选中项的id即可，不用存整个数组：

// 初始状态设为null表示默认无选中项，也可以设为某个默认选中的id
const [selectedId, setSelectedId] = useState(null);

然后修改pressHandler，复用类似的判断逻辑：如果当前点击的项已经是选中状态，就取消选中；否则切换为选中它：

const pressHandler = (id) => {
  setSelectedId(prevSelectedId => 
    // 三元判断：当前id已选中就置空，否则设为当前id
    prevSelectedId === id ? null : id
  );
};

最后在渲染列表项时，根据selectedId是否匹配当前项的id来应用高亮样式：

import { FlatList, TouchableOpacity, Text, StyleSheet } from 'react-native';

// 渲染列表
<FlatList
  data={Data}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <TouchableOpacity
      onPress={() => pressHandler(item.id)}
      // 组合基础样式和高亮样式
      style={[
        styles.listItem,
        selectedId === item.id ? styles.highlightedItem : {}
      ]}
    >
      <Text>{item.content}</Text>
    </TouchableOpacity>
  )}
/>

// 样式定义
const styles = StyleSheet.create({
  listItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  highlightedItem: {
    backgroundColor: '#e8f4fd', // 选中时的背景高亮色
  }
});

二、多选场景（可以选中多个列表项） #

如果需要支持多选，我们把状态改成存储选中项的id数组，这样就能复用你原来的filter逻辑来移除选中项：

// 初始状态为空数组，默认无选中项
const [selectedIds, setSelectedIds] = useState([]);

修改pressHandler，这里就直接复用了你原有的filter逻辑！当点击的项已选中时，用filter移除它；未选中时就把id加入数组：

const pressHandler = (id) => {
  setSelectedIds(prevSelectedIds => {
    // 检查当前id是否已在选中列表里
    if (prevSelectedIds.includes(id)) {
      // 已选中，移除它——这里完全复用了你原来的filter逻辑！
      return prevSelectedIds.filter(selectedId => selectedId !== id);
    } else {
      // 未选中，添加到选中列表
      return [...prevSelectedIds, id];
    }
  });
};

渲染时判断当前项的id是否在selectedIds数组中，应用高亮样式：

<FlatList
  data={Data}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <TouchableOpacity
      onPress={() => pressHandler(item.id)}
      style={[
        styles.listItem,
        selectedIds.includes(item.id) ? styles.highlightedItem : {}
      ]}
    >
      <Text>{item.content}</Text>
      {/* 可选：添加选中标记，比如对勾 */}
      {selectedIds.includes(item.id) && <Text style={styles.checkmark}>✓</Text>}
    </TouchableOpacity>
  )}
/>

const styles = StyleSheet.create({
  listItem: {
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  highlightedItem: {
    backgroundColor: '#e8f4fd',
  },
  checkmark: {
    color: '#2196f3',
    fontSize: 18,
  }
});

这样不管是单选还是多选，都完美复用了你原有的逻辑思路，而且用React Hooks管理状态也非常清晰~

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