react-native-dropdown-picker v4.0.2如何修改下拉默认标题

问题场景 #

使用v4.0.2版本的react-native-dropdown-picker时，即便代码里传入了自定义的占位文本属性，打开下拉面板后，面板顶部始终显示默认的硬编码文字select an item，无法直接改成需要的select a category这类自定义内容。

容易混淆的配置点 #

需要先明确组件两个不同的文本展示位，避免属性错用：

• 输入框占位文本：对应placeholder属性，只控制组件收起状态下，没有选中任何选项时输入框位置的提示内容，不会影响下拉面板内部的展示
• 下拉面板头部文本：也就是大家看到的默认select an item，这个位置在v4.0.2版本里是组件源码写死的，既没有单独的配置prop暴露，也不会自动读取placeholder的自定义值

具体实现方案 #

方案1：升级组件版本（推荐） #

把react-native-dropdown-picker升级到v5.0.0及以上版本即可解决：新版本已经把面板头部的文本和placeholder属性做了打通，你之前写的placeholder="Select category"会同时作用于输入框占位和下拉面板的头部标题，不需要额外加其他配置，就能实现预期的自定义效果。

方案2：固定v4.0.2版本的适配方法 #

如果因为项目兼容问题没法升级版本，可以通过开启搜索功能替代硬编码的头部标题：

• 给组件加searchable={true}属性，此时下拉面板的头部会从静态硬编码文字替换为搜索输入框
• 再用searchablePlaceholder属性自定义搜索框的提示内容，比如设置成searchablePlaceholder="Select a category"，就能达到自定义标题的展示效果

代码优化提示 #

现有代码里导入的SelectMultiple组件全程没有使用，可以直接删掉对应的导入语句，减少冗余代码和不必要的打包体积。 #

内容的提问来源于stack exchange，提问作者Mamunur Rashid