Skip to content

tmxiong/gank

Repository files navigation

基于react native + redux开发的iOS和安卓干果客户端

react native的优点想必不用多说,就如同facebook开发react native的宗旨所述,Learn Once ,Write Anywhere,只用一套js代码即可同时写出接近原生用户体验的安卓和iOS app.让许多中小互联网企业眼前一亮,给他们带来无限希望与可能.


image image image

功能

整体分为首页福利/我的三个底部tab导航

首页:

  • Android & iOS & 前端 & 休息视频 & 瞎推荐 & 拓展资源六个顶部tab分类导航;
  • 文章列表可下拉刷新/上拉加载 ;
  • 文章详情页可进行收藏分享
    image

福利页:

  • 美女图片列表下拉刷新/上拉加载;
  • 最新随机两种图片排序方式;
  • 点击图片进入图片浏览模式,可缩放保存
    image

我的页:

  • 每日同步最新头像;
  • 查看阅读记录
  • 查看收藏记录
  • 关于;

技术

  • react-native 0.45.1

  • react-navigation
    如果你还在用react-navigator,那么你就out了,马上使用功能强大等 react-navigation,从此告别页面跳转卡顿,还有丰富的自定义功能,包括顶部/底部导航栏和抽屉等;点击进入react-navigation官网,点击进入我的react-navigation小demo

  • redux
    部分页面传值更新状态的地方用到;

  • react-native-splash-screen:
    当项目越庞大时,需要加载的bundle也越大,app首次启动时白屏时间越长,解决白屏的方法可以是让bundle预加载,或者放置首屏图片遮挡白屏,总之都需要修改原生代码。我用的是第二种方法,并且react-native-splash-screen已经给你封装好了,你无需再修改原生代码,直接install即可。鉴于安卓和iOS的差异性,我只在安卓中使用了react-native-splash-screen,iOS的xcode中自带很完善的设置首屏图片功能。

  • react-native-fetch-blob: 用于安卓部分的图片下载,iOS 上使用的是react-native自带的CameraRoll进行图片下载保存。


计划增加的功能:

  • tab栏的排序/增删功能;
  • 阅读记录/收藏的分类/清空功能;
  • 注册/登录功能(使用nodejs实现);

  • app所有数据均来自api/gank/io
  • 如果你有好的意见或建议,欢迎联系tmxiong@foxmail.com;
  • 如果本代码对你有所帮助,欢迎StartFork,同时,也不妨捐赠一下,请我喝杯可乐。
    image

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published