英文:
react native dropdown how to specify different color/style for each label?
问题
我想为下拉列表中的每个标签应用不同的颜色/字体大小。我可以将样式添加到数据数组中，例如data=[{ label: 'Tt', value: '10', { fontColor: 'red' }},...]。有关此方面的建议吗？
import { Dropdown } from 'react-native-element-dropdown';
const data = [
{ label: 'Tt', value: '10', fontColor: 'red' },
{ 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}
iconStyle={stylesDropDown.iconStyle}
data={data}
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={() => (
<><Text>T</Text><Text>t</Text></>
)}
/>
</View>
);
};
英文:
I want to apply different colors/font sizes for each of the labels in the drop-down. I may add the style to the data array like data=[ { label: 'Tt', value: '10',{fontColor:'red'}},...]. Any suggestions on this?
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>
);
};
答案1
得分: 2
要对下拉菜单中的每个标签应用不同的颜色或字体大小，您可以通过向数据数组添加FontColor和FontSize属性来修改数据数组（您也可以动态更改此数据数组）。
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 },
];
声明一个名为renderLabelStyle的函数，
const renderLabelStyle = (label) => {
const item = data.find((item) => item.label === label);
if (item) {
return {
color: item.fontColor,
fontSize: item.fontSize,
};
}
return null;
};
之后，您需要像这样更改您的Dropdown组件中的itemTextStyle，
itemTextStyle={(label) => renderLabelStyle(label)}
尝试使用这个。
英文:
To apply different colors or font sizes to each label in the dropdown, you can modify the data array(you can change this data array dynamically also) by adding a FontColor and FontSize property to each item.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 },
];
<!-- end snippet -->
Declare a function named renderLabelStyle ,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const renderLabelStyle = (label) => {
const item = data.find((item) => item.label === label);
if (item) {
return {
color: item.fontColor,
fontSize: item.fontSize,
};
}
return null;
};
<!-- end snippet -->
After that you need to change the itemTextStyle in your Dropdown component like this,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
itemTextStyle={(label) => renderLabelStyle(label)}
<!-- end snippet -->
Try using this .
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论