React-Native 可能是最友好的Gank.io(干货集中营)客户端了

Posted 2023-02-03 wangdi1224

呼～ 在结束上一个“掘金”客户端后，写了两个星期多，终于又把“干货集中营”的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此项目仓库。