React Native Dropdown：如何为每个标签设置不同颜色/样式？

问题描述 #

我想给下拉选择框的每个标签设置不同的颜色和字号，打算把样式信息加到数据数组里，比如data=[ { label: 'Tt', value: '10', fontColor:'red'},...]，请问有什么可行的实现方案？

原始代码 #

import { Dropdown } from 'react-native-element-dropdown';
const data = [
                    { label: 'Tt', value: '10'},
                    { label: 'Tt', value: '12' },
                    { label: 'Tt', value: '16' },
                    { label: 'Tt', value: '20' },
                    ];



   const DropdownComponent = () => {
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);

    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
                    </Text>
        );
      }
      return null;
    };

    return (
      <View style={stylesDropDown.container}>
        {renderLabel()}
        <Dropdown
          style={[stylesDropDown.dropdown, isFocus && { borderColor: 'blue' },  ]}
          placeholderStyle={stylesDropDown.placeholderStyle}
          selectedTextStyle={stylesDropDown.selectedTextStyle}
          // inputSearchStyle={stylesDropDown.inputSearchStyle}
          iconStyle={stylesDropDown.iconStyle}
          data={data}
          // search
          maxHeight={300}
          labelField="label"
          valueField="value"
          itemTextStyle="style"
          placeholder={!isFocus ? 'Select item' : '...'}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);

          }}
          renderLeftIcon={() => (
            // <AntDesign
            //   style={styles.icon}
            //   color={isFocus ? 'blue' : 'black'}
            //   name="Safety"
            //   size={20}
            // />
             <><Text>T</Text><Text>t</Text></>
          )}
        />
      </View>
    );
  };

解决方案 #

你可以通过react-native-element-dropdown提供的renderItem属性实现每个选项的自定义样式，具体步骤如下：

1. 更新数据结构：在每个数据项中添加自定义样式字段（比如fontColor和fontSize）
2. 使用renderItem自定义选项渲染：替换无效的itemTextStyle配置，通过renderItem返回带自定义样式的Text组件

修改后的完整代码：

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

// 更新数据结构，添加样式字段
const data = [
  { label: 'Tt', value: '10', fontColor: 'red', fontSize: 14 },
  { label: 'Tt', value: '12', fontColor: 'green', fontSize: 16 },
  { label: 'Tt', value: '16', fontColor: 'blue', fontSize: 18 },
  { label: 'Tt', value: '20', fontColor: 'purple', fontSize: 20 },
];

const DropdownComponent = () => {
  const [value, setValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);

  const renderLabel = () => {
    if (value || isFocus) {
      return (
        <Text style={[styles.label, isFocus && { color: 'blue' }]}>
        </Text>
      );
    }
    return null;
  };

  // 自定义选项渲染函数
  const renderItem = (item) => {
    return (
      <View style={{ padding: 12 }}>
        <Text 
          style={{ 
            color: item.fontColor, 
            fontSize: item.fontSize,
            // 可添加更多基础样式
            fontFamily: 'sans-serif',
            textAlign: 'left'
          }}
        >
          {item.label}
        </Text>
      </View>
    );
  };

  return (
    <View style={stylesDropDown.container}>
      {renderLabel()}
      <Dropdown
        style={[stylesDropDown.dropdown, isFocus && { borderColor: 'blue' }]}
        placeholderStyle={stylesDropDown.placeholderStyle}
        selectedTextStyle={stylesDropDown.selectedTextStyle}
        iconStyle={stylesDropDown.iconStyle}
        data={data}
        maxHeight={300}
        labelField="label"
        valueField="value"
        renderItem={renderItem}
        placeholder={!isFocus ? 'Select item' : '...'}
        searchPlaceholder="Search..."
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={item => {
          setValue(item.value);
          setIsFocus(false);
        }}
        renderLeftIcon={() => (
          <><Text>T</Text><Text>t</Text></>
        )}
      />
    </View>
  );
};

// 示例样式配置
const styles = {
  label: {
    marginBottom: 8,
    fontSize: 16,
  },
};

const stylesDropDown = {
  container: {
    marginVertical: 16,
  },
  dropdown: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 16,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
};

export default DropdownComponent;

关键说明 #

• renderItem函数接收每个数据项作为参数，可直接使用item中的样式字段设置Text组件样式
• 若需自定义选中项样式，可结合selectedTextStyle或在onChange后根据选中值动态调整
• 务必移除原始代码中无效的itemTextStyle="style"配置，避免样式冲突

内容的提问来源于stack exchange，提问作者javapedia.net