自定义 react-native-dropdown-picker 中的元素

Question

React Native Dropdown Picker is the most popular library to implement a dropdown in React Native. But in the library, I could not find a way to customize the dropdown arrow and the ticks in the dropdown list. They are by default in black color and cannot be customized with my knowledge.

Basic implementation:

 import DropDownPicker from 'react-native-dropdown-picker'; function App() { const [open, setOpen] = useState(false); const [value, setValue] = useState(null); const [items, setItems] = useState([ { label: 'ice-cream', value: '1' }, { label: 'strawberry', value: '2' }, { label: 'grapes', value: '3' }, { label: 'fruit salad', value: '4' }, { label: 'jello', value: '5' }, { label: 'apple', value: '6' }, ]); return ( <DropDownPicker open={open} value={value} items={items} setOpen={setOpen} setValue={setValue} setItems={setItems} /> ); }

Sample Output: [Click here to see the output] 2

There is a prop in the called arrowIconStyle . But for that also, I could not find a way to give a color as a style.

Ex: arrowIconStyle={{color: 'white'}}

Unfortunately this does not work and gives an error: 

Type '{ color: string; }' is not assignable to type 'StyleProp'.ts(2322)

Can someone please help me regarding this?

Thank you.

Answer 1

尝试更改箭头图标并为图标实现您自己的样式，如下所示： https ://snack.expo.dev/@hewr/57a779

Answer 2

//to change the dropdown box style
dropDownContainerStyle={{
  backgroundColor: "#dfdfdf"
}}

// to style the selected item style
selectedItemContainerStyle={{
   backgroundColor: "grey"
}}

for more details visit their website

and check the Dropdown and List and Items sections