React Native Dropdown Picker如何为选项左侧添加图标？

1. 更新选项数组，添加图标数据 #

先给你的networkItems每个选项新增icon字段，用来存储对应图标的组件：

const networkItems = [
  {
    label: "Ethereum",
    value: "eth",
    // 替换为你的图标组件（本地图片/SVG均可）
    icon: () => (
      <Image
        source={require('./path-to-icons/eth-icon.png')}
        style={{ width: 20, height: 20, marginRight: 10 }}
      />
    )
  },
  // 其他网络选项同理添加icon
  {
    label: "Polygon",
    value: "polygon",
    icon: () => (
      <Image
        source={require('./path-to-icons/polygon-icon.png')}
        style={{ width: 20, height: 20, marginRight: 10 }}
      />
    )
  }
];

2. 自定义下拉选项与选中项的渲染 #

在DropDownPicker组件中添加renderItem（控制下拉列表选项样式）和renderLabel（控制选中后顶部显示样式）两个属性，实现带图标的布局：

<DropDownPicker
  testID="network-dropdown"
  open={networkOpen}
  value={networkValue}
  items={networkItems}
  setOpen={setNetworkOpen}
  setValue={setNetworkValue}
  setItems={setNetworkItems}
  style={$dropdown}
  textStyle={$dropdownText}
  dropDownContainerStyle={$dropdownListContainer}
  itemSeparatorStyle={{
    borderBottomColor: colors.palette.black,
    borderBottomWidth: spacing.z,
  }}
  showTickIcon={false}
  zIndex={2000}
  zIndexInverse={2000}
  // 自定义下拉选项的渲染结构
  renderItem={(item) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 12 }}>
      {item.icon()}
      <Text style={$dropdownText}>{item.label}</Text>
    </View>
  )}
  // 自定义选中项的顶部显示结构
  renderLabel={(item) => (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      {item.icon()}
      <Text style={$dropdownText}>{item.label}</Text>
    </View>
  )}
/>

关键说明 #

• renderItem：完全自定义下拉列表内每个选项的布局，通过横向排列实现图标+标签的显示效果。
• renderLabel：默认选中后仅展示文本标签，通过该属性重定义选中项的显示内容，确保选中状态下依然显示图标。
• 图标样式可根据需求调整尺寸、间距，若使用SVG组件替代图片，只需将icon字段内的组件替换为你的SVG即可。

内容的提问来源于stack exchange，提问作者Bartu Gençcan