为了账号安全,请及时绑定邮箱和手机立即绑定

react-native实现的一款iOS,Android的菜谱客户端

2018.10.07 12:50 582浏览

前言

上一个项目天气预报使用react-native提供的传统stateprops管理搭建项目, 这个则采用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-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一起沟通交流



作者:小猿_Luck_Boy
链接:https://www.jianshu.com/p/5d51cbf60e95


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消