React Native函数组件中动态列表项CheckBox选中状态绑定方法

你不需要使用ref来操作元素，直接通过React状态驱动视图即可，适配React Native 0.63版本，实现步骤如下：

1. 定义选中状态集合
   使用useState存储已选中项的唯一标识，优先用Set类型方便快速判断存在性、增删元素：

import { useState } from 'react';

// 组件内部
// 假设你的items数组中每个元素都有唯一id字段，如果没有可以用索引代替
const [selectedIds, setSelectedIds] = useState(new Set());

2. 实现选中切换逻辑
   定义切换函数，接收当前映射的l对象，更新选中状态的同时可以直接操作当前对象：

const toggleItemCheck = (item) => {
  const newSelectedIds = new Set(selectedIds);
  if (newSelectedIds.has(item.id)) {
    // 已选中则取消
    newSelectedIds.delete(item.id);
  } else {
    // 未选中则加入
    newSelectedIds.add(item.id);
  }
  setSelectedIds(newSelectedIds);
  // 此处可以直接使用item对象执行你需要的其他操作
};

3. 绑定属性到ListItem.CheckBox
   修改你原有的列表渲染代码，把checked属性绑定到状态判断结果，onPress绑定切换函数并传入当前l对象：

{items.map((l, i) => (
    <ListItem.Swipeable
      key={i}
    >
      <ListItem.CheckBox
        iconType='material'
        checkedIcon='clear'
        uncheckedIcon='add'
        checkedColor='red'
        // 绑定选中状态
        checked={selectedIds.has(l.id)}
        // 点击时传入当前l对象触发切换
        onPress={() => toggleItemCheck(l)}
      />
      <ListItem.Content>
        <ListItem.Title>
          {l.time}
        </ListItem.Title>
      </ListItem.Content>
      <ListItem.Chevron />
    </ListItem.Swipeable>
  ))}

4. 扩展操作说明

• 如果你的items没有唯一id字段，可以把索引i作为标识存储，对应修改判断逻辑为selectedIds.has(i)，切换函数传入i即可
• 需要获取所有选中的关联对象时，直接过滤原数组即可：const selectedItems = items.filter(item => selectedIds.has(item.id))
• 全选、反选等操作只要修改selectedIds这个Set集合即可自动同步所有CheckBox的选中状态

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