如何在React Native中实现选中选项留存的多选选择器

以下是两种实现方案，满足你“选中选项留存于选择器视图内”的需求：

一、自定义实现（灵活可控） #

核心逻辑 #

用状态管理选择器的展开/收起状态，同时存储选中的选项；点击触发栏切换展开状态，点击选项后更新选中值并自动收起列表。

完整代码示例 #

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';

// 模拟选项数据
const options = [
  { id: 1, label: '选项1' },
  { id: 2, label: '选项2' },
  { id: 3, label: '选项3' },
  { id: 4, label: '选项4' },
  { id: 5, label: '选项5' },
];

const PersistentSelector = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const handleSelectItem = (item) => {
    setSelectedItem(item);
    setIsOpen(false);
  };

  return (
    <View style={styles.container}>
      {/* 选择器触发栏 */}
      <TouchableOpacity
        style={styles.trigger}
        onPress={() => setIsOpen(!isOpen)}
      >
        <Text style={styles.triggerText}>
          {selectedItem ? selectedItem.label : '请选择'}
        </Text>
        <Text style={styles.arrow}>{isOpen ? '▲' : '▼'}</Text>
      </TouchableOpacity>

      {/* 展开的选项列表 */}
      {isOpen && (
        <View style={styles.dropdown}>
          <ScrollView style={styles.scrollView}>
            {options.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={[
                  styles.option,
                  selectedItem?.id === item.id && styles.selectedOption,
                ]}
                onPress={() => handleSelectItem(item)}
              >
                <Text
                  style={[
                    styles.optionText,
                    selectedItem?.id === item.id && styles.selectedOptionText,
                  ]}
                >
                  {item.label}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '80%',
    marginHorizontal: '10%',
    marginTop: 50,
  },
  trigger: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    backgroundColor: '#fff',
  },
  triggerText: {
    fontSize: 16,
    color: '#333',
  },
  arrow: {
    fontSize: 16,
    color: '#666',
  },
  dropdown: {
    marginTop: 4,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    backgroundColor: '#fff',
    maxHeight: 200,
  },
  scrollView: {
    maxHeight: 200,
  },
  option: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  selectedOption: {
    backgroundColor: '#e8f4ff',
  },
  optionText: {
    fontSize: 16,
    color: '#333',
  },
  selectedOptionText: {
    color: '#1677ff',
    fontWeight: '500',
  },
});

export default PersistentSelector;

关键说明 #

• 状态控制：isOpen控制下拉列表显隐，selectedItem存储选中项
• 交互逻辑：点击触发栏切换展开状态，选中选项后自动收起列表并更新显示文本
• 样式优化：给选中选项添加高亮背景和文字颜色，提升辨识度

二、第三方库快速实现 #

如果不想自定义开发，可以使用成熟的第三方库，比如react-native-dropdown-picker，开箱即用支持选中项留存功能：

代码示例 #

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

const ThirdPartySelector = () => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      containerStyle={{ height: 50, width: '80%', marginHorizontal: '10%', marginTop: 50 }}
      style={{ backgroundColor: '#fafafa' }}
      itemStyle={{ justifyContent: 'flex-start' }}
      dropDownStyle={{ backgroundColor: '#fafafa' }}
    />
  );
};

export default ThirdPartySelector;

使用前需先安装依赖：

npm install react-native-dropdown-picker
# 或
yarn add react-native-dropdown-picker

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