逛丢网是一家汇集各大电商站优惠商品信息的资讯站.
因为该站架构较为简单,数据文档全面,接口也十分稳定.
所以才使用React Native技术开发了该项目.
android环境下开发,ios没有详细测试.
该项目为个人学习react-native的Demo,欢迎技术交流.
-
Gif示例
-
APP架构 processon
APP架构图
- 1.启动页
- 使用react-navigation中(TabNavigation+StackNavigator)实现页面导航功能
- 将页面navigation路由配置整理成单独的模块.
- 封装fetch为公共方法,将其追加为global的属性,方便调用
- 根据接口文档将各接口地址整合到配置文件中.
- 将配置文件,封装的fetch类,常用Helper类等整合到自定义package中,便于各页面引用.
- 将Main.js作为项目入口文件,在其中引用需要优先初始化的fetch类等组件.
- 2.首页
- 重写Header组件,并将该Header封装为公共组件,在首页和海淘页共用
- 点击header左侧图标,实现跳转到30分钟最热排行页面.
- 点击header中间部分图标,使用Modal将商品分类模块展示
- 点击header右侧部分图标,跳转到商品搜索页.
- 支持按照优惠网站,商品分类来进行商品数据筛选.
- 将商品分类模块提取为公共模块,首页和海淘页共用.
- 使用FlatList进行优惠信息展示.
- 将数据项提取为公共组件,在首页,海淘页,搜索页等页面公用.
- 支持下拉刷新和上滑加载功能.
- 将优惠详情页提取为公共组件,各页面共用.
- 将FlatList为空时的效果提取为公共组件,各列表项共用.
- 3.海淘页
- 和首页公用header组件,支持跳转到30分钟最热排行和搜索页.
- 支持按照商品类别和来源网站筛选.共用Item数据项
- 支持下拉刷新和上滑加载功能.
- 4.半小时热门商品排行页
- 根据传入props的不同分别展示国内/海淘优惠排行
- 使用FlatList进行排行,共用Item数据项
- 使用WebView来链接官网展示优惠详情.
- 5.小时排行榜
- 将时间切换组件提取为公共组件.
- 用户可以自由切换想要查看的时间段.
- 使用FlatList进行排行,共用Item数据项
- 支持下拉刷新和上滑加载功能.
- 6.搜索页
- 将用户查询的结果使用FlatList进行展示.
- 支持下拉刷新和上滑加载功能.
- 数据为空时提醒用户查询结果为空.
- 在APP中加入九块九专区模块
- 使用Redux替换State进行状态管理
- 将asyncStorage替换为realm
- 使用react-element-ui框架库来规范项目中各组件.
- [ ]
# git clone
git clone
# use yarn or npm install the package
yarn install
# start the package server
react-native run-android