react-native实现的一款iOS，Android的菜谱客

前言

上一个项目天气预报使用react-native提供的传统state和props管理搭建项目, 这个则采用react-redux,redux搭建项目;两者区别在天气预报有详细的讲解，本项目重点是redux,react-redux,react-navigation使用;

官方文档

• 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-storage

一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)
这个框架的存储内容是文件存储，而且还是明文的，可以在iOS沙盒找到存储文件，打开后内容一目了然。这太不安全了；

所以,如果你的项目安全性比较高，建议搭配加密的js框架一起使用。crypto-js

• react-native-gallery

react-native-gallery

相册墙

• immutable

immutable

immutable可以说给react的app提高了性能,是很厉害的一个库，可以飞升react开发的app的性能

• react-native-swiper轮播

react-native-swiper

• react-navigation

react-navigation

这个库提供三种框架的搭建app

• tabBar

• navigator

• drawer 侧边栏

• redux-thunk

redux-thunk

redux-thunk 是 redux 官方文档中用到的异步组件

心得

• 使用redux是有利于项目的搭建，和业务逻辑拆分，降低耦合度
• 在app中store管理的state是全局的，这导致在退出页面的数据还存在内存，这就需要在页面退出的时候，我们手动的清除缓存数据，以免再次进入页面时，缓存数据还存在。
• 我们都知道web编写style是一件繁琐的事情，虽然react-native的style比web的css更简单。但是当app复杂化的时候(比如管理皮肤)，怎样更方便去管理style是一个问题？求解？ 有方案的大神可以联系liushuo132981@163.com一起沟通交流