搜索功能是绝大多数App应有的一个功能，以方便快捷的方式在App内搜索自己想要查找的内容，这无疑是在用户体验上有着很大的提升。
1、（布局）
输入框输入检索内容
筛选提示
可清空输入内容按钮
搜索按钮
提示列表/检索结果列表
热门词汇
搜索历史列表倒序（当有搜索历史时）
清除搜索历史
无内容页面
2、（交互）
当输入框为空的时候，展示为：搜索框+提示热词+搜索历史列表（如果有）
当在输入框输入检索内容时返回提示列表/检索结果列表
点击搜索按钮或者软键盘上的搜索按钮时刷新搜索（输入框不为空）
点击筛选提示出现可供选择的筛选条件
点击搜索热词，输入框填充该热词并开始搜索
点击清空搜索内容时，界面回到初始状态
点击某条搜索历史，输入框填充该内容并开始搜索
点击清除搜索历史，搜索历史项置空
3、代码实现（由于截图不方便故代码写在CSDN上，链接如下）
4、效果图
无搜索记录图
有搜索记录图
ReactNative搜索页面的设计与实现 搜索功能是绝大多数App应有的一个功能，以方便快捷的方式在App内搜索...
前面我们分享了首页、列表页/搜索页、详情页的设计，我们希望用户通过首页到列表页/搜索页再到详情页，最后形成我们需要...
在ReactNative中与Android进行交互 第一实现ReactContextBaseJavaModule接...
安装webview包 使用的是：react-native-webview ReactNative webview设...
我们在移动应用开发中经常会应用到启动页与引导页，为了实现启动页与引导页，以及应用功能界面的无缝连接，今天我...
首页点击搜索跳转到搜索详情页，实现关键字搜索功能 //首页wxml
在搜索即时结果的设计中，大部分都是展示标题。Yahoo Video Guide 在结果中还增加了影片海报。 图文的...
响应式网页设计 响应式图片解决方案 三步完成自适应网页设计 使用Flexible实现手淘H5页面的终端适配
我们知道原生应用需要开发热更新的模块，可以集成ReactNative框架实现，那么你的热更新模块，如你的商品展示页...
关于实现二分搜索树，可以看前面的文章 手敲数据结构——二分搜索树 Map接口 实现代码 测试用例 统计《傲慢与偏见...
本文标题：ReactNative搜索页面的设计与实现
本文链接：https://www.haomeiwen.com/subject/fobsfctx.html
网友评论