打造属于自己的博客app——基于react native和博客园接口
关注react native这个技术很久了，去年就做了一个简单的Demo,最近有时间，重新了解了一下react native的现状，发现已经有很大的进步，现在完善了一下原有的项目，并重新开源共享一下。
背景
对react native这个技术关注很久了，去年也花了很长时间学习，但中途因为时间问题没有进行更深入的学习。当时，react native还存在很多坑，使用起来不太方便。一年过去，现在重新开始关注react native，发现react native已经将原有的很多问题解决，相比当年版本，有太多的进步。现在将原有项目重构并重新发布到github。
项目简介
基于博客园的接口，开发的一个博客的app工具，包括个人博客、博客首页、博客详情，后续会逐渐完善评论、推荐、以及新闻等相关模块。
使用的主要技术和插件：
| 插件 | 说明 |
|---|---|
| react redux | react state管理方案 |
| react-navigation | react native新的页面导航方案 |
| react-native-elements | 一个react native UI库 |
| lodash | JS函数库 |
| react-native-autoheight-webview | webview解决方案 |
| react-native-vector-icons | react native icon组件 |
项目结构
代码全部在source目录里，其他代码有react native自动生成，当然，index.js相关入口文件有调整，source中目录简单介绍一下：
| 目录 | 说明 |
|---|---|
| action | redux中的action |
| common | 通用的js常用函数 |
| component | 自己的UI组件 |
| config | 项目的配置信息，需要改成自己项目的，调整这里。 |
| constant | 定义的一些常量 |
| middleware | react middleware log，记录state日志 |
| reducer | redux中的reducer |
| service | 网络请求，调用接口相关 |
| style | 样式 |
| view | 页面page |
使用
最基本的react native使用方式：
git clone https://github.com/itmifen/mfreader.git
npm install
react-native link
react-native run-ios
正常运行需要将config目录中的index.js文件中的accessInfo进行配置。clientId和clientSecret可以联系博客园团队获取。
//cnblogs授权信息
export const accessInfo={
clientId:"*********",
clientSecret:"**************"
};
首页展示自己的博客只需要修改blogname就可以了。
//app配置信息
export const appinfo={
blogname:"joylee",
logourl:"https://pic.cnblogs.com/face/42030/20171003230725.png",
cnblogsApi:"https://api.cnblogs.com",
pageSize:10
};
项目技术说明
页面导航解决方案
之前版本的react native 的页面导航没有一个很好的解决方案，最大的问题就是页面切换的卡顿，很多第三方的导航组件使用起来性能更差，还不如自己开发。现在官方推荐使用 react-navigation 组件进行开发，使用之后的确比之前性能好很多，同时还支持tab、侧边栏导航效果，是以后react native开发必须考虑的方案。
redux
redux现在是react state管理最通用的解决方案，使用非常广泛，我也不曾想到redux的学习花了我最多的时间。redux是一个state管理的解决方案，是一个单独的项目，react redux是基于react 的解决方案，而异步的react redux会更加复杂一点。对于redux的学习和使用，经历了好久才真正理解redux的整个数据流和事件流。
html展示的解决方案
展示webview一直是一个头疼的问题，虽然通过 https://js.coach 可以找到很多webview的解决方案，大部分看起来很好的解决方案是将html转成原生的jsx节点。实际使用和最终的理想还是有差距的，最后我还是选择了webview渲染html的方案。我使用的是react-native-autoheight-webview 这个组件，原始的webview组件必须设置高度，react-native-autoheight-webview可以不用设置高度，自动根据内容定义高度。
性能问题
页面切换性能
强烈建议使用react-navigation，直接使用navigation组件，总是存在卡顿的情况，android环境特别明显，使用react-navigation整个人都好了。基本不用考虑其他黑科技。
console.log日志对性能非常大的影响
如果一直觉得开发调试的时候系统卡顿明显，建议把console.log去掉试试，console.log对性能影响严重，debug模式下也会感觉比较慢，开发完成后，最好是在release环境下测试下。
列表性能问题
很多人反馈列表性能的问题，我一直用listview，暂时没有感觉到性能的问题，所有还没有换成新的组件FlatList,后期会考虑替换，相信官方的推荐和解决方案，都是比较靠谱的解决方案。
性能问题大家一定要仔细阅读 http://reactnative.cn/docs/0.49/performance.html#content 官方的性能说明，每一个都非常重要。
后期计划
因时间有限，所有在UI上不会做太多的调整，这也不是我擅长的，关于功能会进行逐步完善：
- 增加新闻模块
- 增加评论浏览和评论功能
- 增加博客园首页和精华
- 完善个人中心以及相关设置
曾经考虑过做成多个站点聚合数据的形式，但是考虑到工作量的问题，可能短时间内无法实现。
（完）
欢迎大家关注我的公众号交流、学习、第一时间获取最新的文章。
微信号：itmifen
