如何在React Native中使用复选框实现多选下拉

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

const MultiSelectDropdown = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const items = [
    { label: 'Item 1', value: 1 },
    { label: 'Item 2', value: 2 },
    { label: 'Item 3', value: 3 },
    // 添加更多选项...
  ];

  const handleCheckboxClick = (item) => {
    const index = selectedItems.findIndex((selectedItem) => selectedItem.value === item.value);
    if (index > -1) {
      const newSelectedItems = [...selectedItems];
      newSelectedItems.splice(index, 1);
      setSelectedItems(newSelectedItems);
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  // 其他辅助函数和方法...
  
  return (
    <View>
      <TouchableOpacity onPress={() => setModalVisible(true)}>
        <Text>打开下拉菜单</Text>
      </TouchableOpacity>
      <Modal visible={modalVisible} animationType="slide">
        <View>
          {items.map((item) => (
            <View key={item.value}>
              <CheckBox
                value={selectedItems.some((selectedItem) => selectedItem.value === item.value)}
                onValueChange={() => handleCheckboxClick(item)}
              />
              <Text>{item.label}</Text>
            </View>
          ))}
          <TouchableOpacity onPress={() => setModalVisible(false)}>
            <Text>确认</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

const App = () => {
  return (
    <View>
      {/* 其他组件... */}
      <MultiSelectDropdown />
      {/* 其他组件... */}
    </View>
  );
};

export default App;