react-native-dropdown-picker如何自定义箭头与勾选图标样式

react-native-dropdown-picker的默认下拉箭头、选中项勾选图标底层是静态图片资源而非字体图标，直接给arrowIconStyle传入color属性会触发类型报错，也无法生效，对应正确实现方式如下：

自定义下拉箭头 #

两种方案可选：

• 完全替换自定义箭头：使用组件提供的ArrowUpIconComponent、ArrowDownIconComponent属性传入自定义渲染组件，灵活度最高，可自由控制图标样式、尺寸、颜色：

// 示例：使用项目内的图标组件替换默认箭头即可
<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  ArrowUpIconComponent={({style}) => (
    <Icon name="arrow-up" size={18} color="#ffffff" style={style} />
  )}
  ArrowDownIconComponent={({style}) => (
    <Icon name="arrow-down" size={18} color="#ffffff" style={style} />
  )}
/>

• 保留默认箭头仅修改颜色：不要传color属性，改用Image元素支持的tintColor配置，即可解决TS类型报错：

<DropDownPicker
  // 其余基础属性不变
  arrowIconStyle={{
    tintColor: '#ffffff'
  }}
/>

自定义选中项勾选图标 #

• 替换自定义勾选图标：使用TickIconComponent属性传入自定义图标组件，逻辑和自定义箭头一致：

<DropDownPicker
  // 其余基础属性不变
  TickIconComponent={({style}) => (
    <Icon name="check" size={16} color="#1890ff" style={style} />
  )}
/>

• 保留默认勾选图标仅修改颜色：通过listItemIconStyle配置tintColor即可：

<DropDownPicker
  // 其余基础属性不变
  listItemIconStyle={{
    tintColor: '#1890ff'
  }}
/>

报错原因说明：组件内置的默认图标均为本地静态图片资源，仅支持图片类样式属性，文本类的color属性不属于Image的合法样式参数，因此TS会抛出类型不匹配错误，用图片着色属性tintColor替代即可解决。

内容的提问来源于stack exchange，提问作者Anna Fletcher