ReactNative搜索页面的设计与实现
搜索功能是绝大多数App应有的一个功能，以方便快捷的方式在App内搜索自己想要查找的内容，这无疑是在用户体验上有着很大的提升。
1、（布局）
输入框输入检索内容
筛选提示
可清空输入内容按钮
搜索按钮
提示列表/检索结果列表
热门词汇
搜索历史列表倒序（当有搜索历史时）
清除搜索历史
无内容页面
2、（交互）
当输入框为空的时候，展示为：搜索框+提示热词+搜索历史列表（如果有）
当在输入框输入检索内容时返回提示列表/检索结果列表
点击搜索按钮或者软键盘上的搜索按钮时刷新搜索（输入框不为空）
点击筛选提示出现可供选择的筛选条件
点击搜索热词，输入框填充该热词并开始搜索
点击清空搜索内容时，界面回到初始状态
点击某条搜索历史，输入框填充该内容并开始搜索
点击清除搜索历史，搜索历史项置空
3、代码实现（由于截图不方便故代码写在CSDN上，链接如下）
4、效果图
无搜索记录图
有搜索记录图
网友评论