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

【问题标题】：Customize elements in react-native-dropdown-picker自定义 react-native-dropdown-picker 中的元素
【发布时间】：2023-01-05 16:10:38
【问题描述】：

React Native Dropdown Picker 是在 React Native 中实现下拉列表的最受欢迎的库。但是在库中，我找不到自定义下拉列表中的下拉箭头和刻度的方法。它们默认为黑色，据我所知无法自定义。

基本实现：

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}
    />
  );
}

示例输出：[点击此处查看输出]2

在arrowIconStyle中有一个道具。但就此而言，我也找不到将颜色作为样式的方法。

例如：arrowIconStyle={{color: 'white'}}

Unfortunately this does not work and gives an error:

输入'{颜色：字符串； }' 不可分配给类型 'StyleProp'.ts(2322)

有人可以帮我解决这个问题吗？

谢谢你。

【问题讨论】：

标签： react-native react-native-dropdown-picker

【解决方案1】：

尝试更改箭头图标并为图标实现自己的样式像下面这样： https://snack.expo.dev/@hewr/57a779

【讨论】：

【解决方案2】：

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

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

欲了解更多详情，请访问their website

并检查落下和列表和项目部分

【讨论】：