ReactNative搜索页面的设计与实现

搜索功能是绝大多数App应有的一个功能，以方便快捷的方式在App内搜索自己想要查找的内容，这无疑是在用户体验上有着很大的提升。

1、（布局）

输入框输入检索内容

筛选提示

可清空输入内容按钮

搜索按钮

提示列表/检索结果列表

热门词汇

搜索历史列表倒序（当有搜索历史时）

清除搜索历史

无内容页面

2、（交互）

当输入框为空的时候，展示为：搜索框+提示热词+搜索历史列表（如果有）

当在输入框输入检索内容时返回提示列表/检索结果列表

点击搜索按钮或者软键盘上的搜索按钮时刷新搜索（输入框不为空）

点击筛选提示出现可供选择的筛选条件

点击搜索热词，输入框填充该热词并开始搜索

点击清空搜索内容时，界面回到初始状态

点击某条搜索历史，输入框填充该内容并开始搜索

点击清除搜索历史，搜索历史项置空

3、代码实现（由于截图不方便故代码写在CSDN上，链接如下）

RN搜索页面功能实现代码

4、效果图

无搜索记录图 有搜索记录图