如何为react-native-element-dropdown列表容器的选中项设置borderRadius

要给react-native-element-dropdown组件列表中的选中项添加borderRadius，最灵活的方式是通过自定义renderItem属性完全控制列表项的渲染逻辑和样式：

1. 自定义renderItem函数：在函数内判断当前项是否为选中状态，为选中项单独设置borderRadius及配套样式
2. 绑定选中状态：配合组件的value和onChange属性，维护选中项的状态

代码示例 #

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

const CustomDropdown = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  
  // 下拉列表数据源
  const dropdownData = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];

  // 自定义列表项渲染逻辑
  const renderDropdownItem = (item) => {
    const isSelected = item.value === selectedItem?.value;
    return (
      <View
        style={{
          paddingVertical: 12,
          paddingHorizontal: 16,
          // 选中时设置圆角，可自定义数值
          borderRadius: isSelected ? 8 : 0,
          // 可选：给选中项添加背景色强化区分
          backgroundColor: isSelected ? '#f0f0f0' : 'transparent',
        }}
      >
        <Text
          style={{
            color: isSelected ? '#1a73e8' : '#666',
            fontSize: 14,
          }}
        >
          {item.label}
        </Text>
      </View>
    );
  };

  return (
    <Dropdown
      data={dropdownData}
      value={selectedItem}
      onChange={setSelectedItem}
      renderItem={renderDropdownItem}
      labelField="label"
      valueField="value"
      placeholder="请选择"
    />
  );
};

export default CustomDropdown;

说明 #

• 通过isSelected判断当前项选中状态，动态赋予borderRadius样式
• 可按需调整borderRadius数值、选中项背景色、文字颜色等样式细节
• 该方式不受组件默认样式限制，能实现完全自定义的选中项视觉效果

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