react-native-multiple-select组件图标无法显示问题该如何解决？

原因1：未正确配置依赖库 react-native-vector-icons #

react-native-multiple-select 内置图标全部依赖 react-native-vector-icons 实现，未安装或未完成端侧配置会导致所有图标无法渲染。
解决步骤：

• 安装依赖库：
  npm 安装命令：npm install react-native-vector-icons --save
  yarn 安装命令：yarn add react-native-vector-icons
• 端侧配置：
  • iOS：React Native 0.60+ 版本默认支持自动关联，只需进入项目ios目录执行pod install后重新编译项目即可；0.60以下版本需手动执行react-native link react-native-vector-icons后再编译。
  • Android：在项目android/app/build.gradle文件末尾添加如下配置，再重新编译项目：

    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

原因2：组件属性配置错误 #

检查组件的以下属性是否被误配置：

• hideSearch：默认值为false，设置为true会隐藏搜索图标
• hideDropdown：默认值为false，设置为true会隐藏下拉箭头图标
  如不需要隐藏对应功能，将属性值改为false，或直接删除对应属性配置即可。

原因3：图标颜色与背景色重合 #

如果配置完依赖后图标位置为空白无内容，大概率是图标默认颜色和组件背景色一致导致不可见，可以通过自定义图标属性修改颜色，示例如下：

import Ionicons from 'react-native-vector-icons/Ionicons';

<MultiSelect
  // 其他原有属性保持不变
  iconSearch={() => <Ionicons name="search" size={18} color="#333" />}
  iconDropdown={() => <Ionicons name="chevron-down" size={18} color="#333" />}
/>

兜底排查方案 #

如果以上方法都无法解决问题，可卸载组件后重新安装官方最新版本测试：
npm uninstall react-native-multiple-select && npm install react-native-multiple-select@latest --save

内容的提问来源于stack exchange，提问作者Mihir Panchal