react-native-dropdown-picker如何取消已选中的下拉选项

问题背景 #

使用react-native-dropdown-picker在React Native应用中实现下拉选择功能时，需要实现「下拉展开状态下，点击已选中的选项即可取消选中」的交互，组件未提供直接开启该功能的内置属性。
初始实现代码如下：

import React, { useState } from 'react';
import { View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState('');
  const [items, setItems] = useState([
    {label: 'Spain', value: 'spain'},
    {label: 'Madrid', value: 'madrid'},
    {label: 'Barcelona', value: 'barcelona'},
    {label: 'Italy', value: 'italy'},
    {label: 'Rome', value: 'rome'},
    {label: 'Finland', value: 'finland'}
  ]);

  return (
    <View style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 15
    }}>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
      />
    </View>
  );
}

运行效果参考： 下拉选择器效果截图

解决方案 #

直接通过组件暴露的onSelectItem回调自定义选中逻辑即可，无需修改组件源码：

• 监听选项点击事件，判断当前点击项是否为已选中项
• 若点击的是已选中项，将选中值重置为空，实现取消选中效果
• 若点击的是未选中项，正常更新选中值即可

修改后的组件配置代码：

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  // 新增自定义选中逻辑
  onSelectItem={(item) => {
    if (item.value === value) {
      // 点击已选项，清空选中状态，和初始value类型保持一致即可，初始为''就传''
      setValue(null)
    } else {
      // 点击未选项，正常赋值
      setValue(item.value)
    }
  }}
/>

补充说明 #

如果使用的是多选模式（配置multiple={true}），只需要调整判断逻辑：检测点击项的value是否存在于当前选中值数组中，存在则过滤掉该值，不存在则追加到数组中即可，核心实现逻辑一致。

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