You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native(Expo)添加页:品牌选择器无匹配时的替代方案咨询

品牌选择器转文本输入的UI/UX设计建议

以下几个轻量型设计方案,适配React Native(Expo)项目的场景:

  • 底部触发按钮
    在品牌选择器下方添加一行文字按钮,文案用「找不到想要的品牌?手动输入」。点击后隐藏选择器、显示文本输入框,同时按钮文案切换为「返回选择品牌」。按钮样式用浅色文字+下划线,既不抢主界面注意力,又能让用户快速发现这个功能。

  • 下拉列表底部入口
    打开品牌选择器的下拉/弹窗列表后,在列表最底部固定一个「+ 新增自定义品牌」选项(样式可以用浅灰色背景区分常规选项)。点击该选项后自动关闭下拉,直接切换为文本输入框并自动获取焦点,减少用户操作步骤。

  • 选择器右侧切换图标
    在品牌选择器的右侧(和选择器对齐)放置一个小图标,比如「编辑」或「加号」(可用Expo Icons库的Ionicons或MaterialIcons)。点击图标直接切换为文本输入框,切换后图标换成「返回」样式,方便用户随时切回选择器模式。这种方式不占用额外纵向空间,适合页面元素较多的场景。

  • 搜索无结果引导
    如果你的选择器支持搜索,当用户输入内容无匹配结果时,在搜索结果区域显示「未找到该品牌,点击此处输入自定义内容」的提示文字。点击提示后自动切换为文本输入框,并将用户刚才搜索的内容预填进去,避免重复输入。

内容的提问来源于stack exchange,提问作者Jimmy Geers

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 22:56:00