react-native-dropdown-picker 按条件更改下拉背景颜色

Question

We are using react-native-dropdown-picker.

 <DropDownPicker items={timeList.map(item => { return ({ label: item.timeslot, value: item.timeslot }) })} 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', }} />

So the dropdown's background color has been set from 'dropDownStyle' property. I have given the color white.

Let's say, in the 'timeList' (array)variable, I have a key 'enabled' (boolean value) on every object on the array. So I want to give different background colors for different values(true/ false) of the key 'enabled'.

The 'dropDownStyle' is the common property for all the values on the dropdown. So how to change the background color based on every item attribute.

Answer 1

Check this out

    {
  ...
  containerStyle: {
    backgroundColor: "#000"
  },
  labelStyle: {
    color: "#fff"
  }
}