前言
上一个项目天气预报使用react-native提供的传统state和props管理搭建项目, 这个则采用react-redux,redux搭建项目;两者区别在天气预报有详细的讲解，本项目重点是redux,react-redux,react-navigation使用;
官方文档
其中react-redux有许多中间件redux-thunk,react-logger等
个人学习中做的小Demo,有兴趣可以共同学习一下
react-native-learn不断更新中...
项目介绍
github源码 react-native-food
功能
- 首页推荐菜谱列表，热门标签，轮播图显示热门推荐菜谱
- 导航条在滚动下隐藏,显示（
Animated） - 自定义导航
- 分类（不同方式切换）二级列表
- 搜索菜谱 上拉加载, 下拉刷新
- 我的收藏
- 浏览记录
- 菜谱详情
- 菜谱制作步骤的大图浏览
- ...
技术点
- 网络请求的封装
- Animated和滚动事件结合
- 轮播图自定义分页组件
- 上拉加载
- 下拉刷新
- 我的收藏，浏览记录的本地缓存
- 小图点击放大，支持手势
- 二级列表的显示和隐藏
- 自定义
tabBar - 自定义
navigationBar - 组件和
action的绑定等
项目截图
安装
git clone https://github.com/liuboshuo/react-native-food.git
npm install
运行客户端
在android项目找到string.xml文件替换你申请的appKey
react-native run-android
在iOS项目找到pch文件替换你申请的appKey
react-native run-ios
项目使用框架
"dependencies": {
"immutable": "^3.8.1",
"qs":": "^6.5.0",
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-swiper": "^1.5.4",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"react-native-storage":"^2.1.1",
"react-native-gallery":"0.0.17"
},
react-native-storage
一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)
这个框架的存储内容是文件存储，而且还是明文的，可以在iOS沙盒找到存储文件，打开后内容一目了然。这太不安全了；
所以,如果你的项目安全性比较高，建议搭配加密的js框架一起使用。crypto-js
react-native-gallery
相册墙
immutable
immutable可以说给react的app提高了性能,是很厉害的一个库，可以飞升react开发的app的性能
-
react-native-swiper轮播
react-navigation
这个库提供三种框架的搭建app
tabBar
navigator
drawer 侧边栏
redux-thunk
redux-thunk 是 redux 官方文档中用到的异步组件
心得
- 使用
redux是有利于项目的搭建，和业务逻辑拆分，降低耦合度 - 在app中store管理的state是全局的，这导致在退出页面的数据还存在内存，这就需要在页面退出的时候，我们手动的清除缓存数据，以免再次进入页面时，缓存数据还存在。
- 我们都知道web编写style是一件繁琐的事情，虽然react-native的style比web的css更简单。但是当app复杂化的时候(比如管理皮肤)，怎样更方便去管理style是一个问题？求解？
