ReactNative搜索页面的设计与实现

ReactNative搜索页面的设计与实现

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

1、(布局)

输入框输入检索内容

筛选提示

可清空输入内容按钮

搜索按钮

提示列表/检索结果列表

热门词汇

搜索历史列表倒序(当有搜索历史时)

清除搜索历史

无内容页面

2、(交互)

当输入框为空的时候,展示为:搜索框+提示热词+搜索历史列表(如果有)

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

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

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

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

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

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

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

3、代码实现(由于截图不方便故代码写在CSDN上,链接如下)

RN搜索页面功能实现代码

4、效果图


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