react-native-dropdown-picker如何按条件设置下拉列表项的背景色

解决方案 #

你可以通过两种方式实现单个选项的背景色自定义：

方法1：直接在items项中添加style属性（更简单） #

react-native-dropdown-picker的items数组每一项支持传入style字段，会单独作用于当前选项，你只需要在构造items的时候根据enabled字段动态设置style即可。
修改后的代码如下：

<DropDownPicker
    items={timeList.map(item => {
        return ({
            label: item.timeslot,
            value: item.timeslot,
            // 新增：根据enabled字段动态设置选项背景色，颜色可按需替换
            style: {
                backgroundColor: item.enabled ? '#fff' : '#f0f0f0'
            }
        })
    })}
    defaultValue={timeList[0].timeslot}
    placeholder={"Select date"}
    containerStyle={styles.dropDownContainer}
    itemStyle={{ justifyContent: "flex-start" }}
    dropDownStyle={{ backgroundColor: colors.white }}
    dropDownMaxHeight={hp("45%")}
    onChangeItem={item => timeSelected(item.value)}
    arrowSize={30}
    arrowStyle={{ position: "absolute", right: 0 }}
    labelStyle={{
        fontSize: wp('3.5%'),
        fontFamily: constants.themeFont,
        textAlign: 'left',
        color: '#000',
        alignSelf: 'center',
    }} />

方法2：使用renderItem属性自定义渲染（更灵活） #

如果你除了背景色之外还需要做更多自定义逻辑（比如修改文字样式、调整内边距等），可以用renderItem属性完全自定义选项的渲染结构：

<DropDownPicker
    items={timeList.map(item => {
        return ({
            label: item.timeslot,
            value: item.timeslot,
            enabled: item.enabled // 把enabled字段传到item中，方便渲染时读取
        })
    })}
    // 新增自定义渲染逻辑
    renderItem={(item, label) => (
        <View style={{
            padding: 12,
            backgroundColor: item.enabled ? '#fff' : '#f0f0f0',
            opacity: item.enabled ? 1 : 0.6
        }}>
            <Text style={{
                fontSize: wp('3.5%'),
                fontFamily: constants.themeFont,
                color: item.enabled ? '#000' : '#999'
            }}>{label}</Text>
        </View>
    )}
    // 其余原有属性保持不变
    defaultValue={timeList[0].timeslot}
    placeholder={"Select date"}
    containerStyle={styles.dropDownContainer}
    itemStyle={{ justifyContent: "flex-start" }}
    dropDownStyle={{ backgroundColor: colors.white }}
    dropDownMaxHeight={hp("45%")}
    onChangeItem={item => timeSelected(item.value)}
    arrowSize={30}
    arrowStyle={{ position: "absolute", right: 0 }}
    labelStyle={{
        fontSize: wp('3.5%'),
        fontFamily: constants.themeFont,
        textAlign: 'left',
        color: '#000',
        alignSelf: 'center',
    }} />

提示：如果需要同时禁用不可用选项的点击事件，可以给不可用选项设置disabled: true属性，组件会自动拦截点击。

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