React Native中隐藏SectionedMultiSelect选中项列表及样式设置求助

刚好我之前折腾过这个组件，给你一步步搞定这两个需求：

1. 隐藏选中项列表 #

SectionedMultiSelect本身就提供了专门的属性来控制已选条目列表的显示，你只需要给组件加上hideSelectedItems={true}这个属性，就能直接把你截图里的高亮区域（已选条目部分）完全隐藏掉。

修改后的组件代码片段：

<SectionedMultiSelect
  items={days}
  uniqueKey="id"
  hideSearch={true}
  subKey="day"
  selectText="Select Days..."
  showDropDowns={true}
  readOnlyHeadings={true}
  onSelectedItemsChange={this.onSelectedItemsChange}
  selectedItems={this.state.selectedItems}
  hideSelectedItems={true} // 新增这个属性隐藏已选列表
/>

2. 自定义组件样式 #

这个组件支持通过styles属性传入自定义样式对象，你可以覆盖组件内部各个部分的样式，比如选择框、下拉列表、分组标题等等。下面给你一个实用的示例，你可以根据自己的UI需求调整：

// 先定义自定义样式对象
const customStyles = {
  // 选择框的整体容器样式
  selectToggle: {
    backgroundColor: '#f5f5f5',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  // 选择框内的提示文本样式
  selectToggleText: {
    color: '#666',
    fontSize: 16,
  },
  // 下拉列表的容器样式
  listContainer: {
    backgroundColor: '#fff',
    borderTopColor: '#eee',
    borderTopWidth: 1,
  },
  // 分组标题的样式
  heading: {
    backgroundColor: '#f0f0f0',
    color: '#333',
    fontSize: 14,
    fontWeight: '600',
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  // 选项文本的样式
  itemText: {
    fontSize: 15,
    color: '#444',
  },
};

// 在组件中使用自定义样式
<SectionedMultiSelect
  items={days}
  uniqueKey="id"
  hideSearch={true}
  subKey="day"
  selectText="Select Days..."
  showDropDowns={true}
  readOnlyHeadings={true}
  onSelectedItemsChange={this.onSelectedItemsChange}
  selectedItems={this.state.selectedItems}
  hideSelectedItems={true}
  styles={customStyles} // 传入自定义样式对象
/>

你可以根据自己的设计需求，在customStyles里添加更多需要覆盖的样式属性，组件支持定制的样式键非常全面，上面这些是日常开发中最常用的几个。

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