打造属于自己的博客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上不会做太多的调整,这也不是我擅长的,关于功能会进行逐步完善:

  • 增加新闻模块
  • 增加评论浏览和评论功能
  • 增加博客园首页和精华
  • 完善个人中心以及相关设置

曾经考虑过做成多个站点聚合数据的形式,但是考虑到工作量的问题,可能短时间内无法实现。

(完)


原文发布于微信公众号 - IT米粉(itmifen)

原文发表时间:2017-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

通过QQ浏览器内核看browser性能优化

摘要 QQ浏览器内核架构组负责人,通过QQ浏览器X5内核在加载速度、流畅度方面所做的优化工作,带你了解浏览器内核的工作原理、展示前端优化的指导性原则、以及更佳的...

5035
来自专栏极乐技术社区

小灯灯实战系列《三》微信小程序:仿今日头条(下)

接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

3456
来自专栏腾讯社交用户体验设计

QQ Mac版 Touch Bar功能设计

1691
来自专栏即时通讯技术

IM开发基础知识补课(二):如何设计大量图片文件的服务端存储架构?

一个完善的IM系统中通常充斥着大量的图片内容,包括:用户头像、图片消息、相册、图片表情等等,那么在做服务端架构设计时该如何存储这些图片呢?

2934
来自专栏企鹅号快讯

小程序也有“home”键盘了!

微信小程序最近仿佛是消停了一会儿儿,没有深夜袭击,不过还是有不断地小更新,今天就来给大家唠叨两个新变化。 --小程序安卓用户更新 12月22日,微信更新了安卓版...

2415
来自专栏韩伟的专栏

经典软件架构模式(二)

今天继续推送“经典软件架构模式(二)之管道和过滤器模式、MVC模式。 管道和过滤器模式 第三个案例是一个WEB的例子,但并不是简单的CGI加数据库,而是一个在...

3286
来自专栏web前端教室

[一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?

接 [一对一讲什么] 之 切图之后做啥?要加入项目和测试接口 上回书说,切完了页面,把HTML文件啊,CSS,JS,IMG图片什么都扔到相应的开发环境目录里,把...

2208
来自专栏腾讯云技术沙龙

刘敏洁:API网关和SCF深度结合应用

这次我们主要介绍面向于API网关和SCF深度结合应用,API网关与SCF结合可以形成比较完整的Serverless方案。

4293
来自专栏非著名程序员

强烈推荐:绝对是最好的一个小程序开源框架

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程...

2104
来自专栏用户2442861的专栏

数据库Sharding的基本思想和切分策略

http://blog.csdn.net/bluishglc/article/details/6161475

1042

扫码关注云+社区

领取腾讯云代金券