成立属于本身的博客app——科技美学基于react native和搜狐接口

关注react
native这一个手艺很久了,二〇一八年就做了三个差不多的德姆o,近来有时光,重新精通了一晃react
native的现状,发现已经有非常的大的进步,现在到家了刹那间原有的门类,一视同仁新开源共享一下。

背景

对react
native那个本领关怀很久了,二零一八年也花了很短日子学习,但中途因为日子难点从未打开越来越深远的学习。当时,react
native还设有好些个坑,使用起来不太有利。一年过去,以往重新初叶关切react
native,发现react
native已经将原有的不在少数难题消除,相比较当年版本,有太多的向上。以后将本来项目重构并再次发表到github。

花色简单介绍

科技美学,依据新浪的接口,开辟的二个博客的app工具,包含个人博客、博客首页、博客详细情况,后续会逐步周密评论、推荐、以及情报等唇齿相依模块。

科技美学 1

动用的显要技能和插件:

插件 说明
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
的页面导航未有二个很好的缓解方案,最大的难点正是页面切换的卡顿,许多第2方的领航组件使用起来质量更差,还不及本身支付。今后法定推荐使用
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
官方的性情表达,每3个都不行关键。

中期安顿

因时光少于,全部在UI上不会做太多的调动,那也不是自笔者擅长的,关于成效会进展逐级周密:

  • 增添音讯模块
  • 追加评论浏览和评论功效
  • 扩充天涯论坛首页和精髓
  • 全盘个人民代表大会旨以及相关设置

1度思量过做成三个站点聚合数据的花样,然则思量到职业量的标题,恐怕长期内无法兑现。

(完)


迎接大家关怀本人的众生号调换、学习、第一时半刻间获取最新的作品。
微信号:itmifen

科技美学 2