呼~ 在结束上一个“掘金”客户端后,写了两个星期多,终于又把“干货集中营”的App写完了。这次因为API开放,所以可以写一个完整的App,而且界面自定义,自由度高,增加了不少自己创作的灵感。
老规矩,先上图,再说话~
这个项目包含以下这些特征:
- 获取当日干货(必须的)
- 可获取分类干货(Android,iOS,前端,瞎推荐,休息视频,扩展资源,APP,福利妹子)
- 福利界面自动获取小图,点击获取高清原图
- 可收藏喜爱的内容
- 功能丰富的内容浏览器
- 夜间模式
- 主题换色
- 首页内容展示顺序调整
- 可关闭获取缩略图功能
- 可关闭每次启动自动获取当日干货(省流量,后面会提到)
先聊聊架构,上次一个小哥建议说用redux来架构react应用,于是在开发这App前,专门学了下redux。因为本人不是前端出生,基本前端的知识现在都是现学现卖的,自己简单写个计数demo。一开始接触redux,反正是一脸懵逼,搞半天没明白到底分开state有何用,不过后来硬着头皮上了redux开发后,越来越能体会到这周架构的优越性在某种程度上。感触最深的是在开发“夜间模式”和“主题换色”上,简直方便得无话可说。当然,不是说在任何时候都需要用reducer来管理state,有些小部分,比如modal的显示和关闭,我是觉得没必要支出一个action配合来管理,不然会多写不少代码。Redux的初衷也只是为了方便管理复杂的state状态。这种简单的逻辑内部解决就好。
再来说说界面吧。有了上个项目的磨砺,这次在界面搭建上还是比较顺手的,一般的布局基本都是想到就直接写出来了,不过也增加了一些难度。比如上图右边的列表,分割线只画到文字部分,图片间是没有分割线的。这种我的做法是分割线用flex划分左右两部分,文字部分的分割线设置灰色,图片部分依然也要设置,和rowItem的背景色一样就可以起到看起来没有的效果了。ListView提供了renderSeparator属性,直接在这里画就可以了。
这一屏中的每一行的item布局就要更麻烦一些,还需要处理右边尖头或者switcher控件。有兴趣的可以实现一下。
说没遇到难题,那是不可能的,在做“福利”界面的时候,最初的打算是做瀑布流的。不过整了好久没整出来,网上也没有查到什么比较好的只用react-native来实现。主要的痛点在于如果用Scrollview做外框架,它没有onEndReached回调,没办法持续刷新。即使能用onScroll的参数算出来,还是没有Listview那样方便。如果用Listview做外框架,如何做到内部分列。我尝试过用两个Listview互相牵引对方移动,就是一个Listview在滑动,另一个根据对方的滑动值来做移动。但这种效果出来效果很差,不能同时等距离移动。此外是嵌套问题,Listview如果嵌套在Scrollview中,呵呵,那就会无限触发onEndReached回调。。。。最后还是放弃了这种布局,老老实实采用方格布局了。如果有实现出来的,记得@我一下~
如果说上一个“掘金”项目是在调用各个Component,那么这个项目就开始用到了一些react native的API了,包括文件存储,Share,Linking等。还有更重要的手势,在这次首页展示排序和WebView中都有用到。比如WebView中向上向下滑动,隐藏和显示工具条的效果,附带用了点Animated的API。
项目开发的麻烦点在于那些细小的问题,比如连接超时处理。redux在这块就是优势,只要state能设计好,逻辑清晰,就可以应对了。正是因为redux可以清晰的知道各个状态是如何发生变化的,所以代码写出来自己思路也比较清晰。我在设计fetch当天数据内容时,还是小小的设计了一把,嘿嘿。知道gank.io网站的人都知道,干货集中营每天只会发布一次干货信息,有时候也会跳票。所以在每次启动客户端的时候,就完全没必要每次都去请求数据。我的做法就是fetch数据前,先去读取本地是否存储了数据,如果有,取出来比对一下时间是否是今天的,如果不是,那么就去fetch数据,fetch不到今天的新数据,那么就直接展示本地现存的数据。如果fetch到今天的新数据,那么就覆盖保存今天的数据。当下一次启动进入时,如果发现数据的时间和今天的时间一样,那么就直接展示本地存储的数据了,不用再去fetch了。当然如果启动起来发现本地没数据,今天的数据也没有更新咋办,那就向前一天获取,直到获取到有数据为止。以上的逻辑可以减少每次启动fetch的次数,不过当新一天到来时,在服务器还没有更新数据前,每次启动都是会去fetch数据的,所以我又添加了“是否自动获取数据”的设置功能,一旦关闭,那么只有手动下拉刷新来获取了。random数据默认需要手动刷新,我考虑是可能不常浏览往日数据。
以上就是我对这次项目的总结了。收获还是颇多的。欢迎star或者fork此项目仓库。