基于react native打造属于自己的博客app

简介: 关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完善了一下原有的项目,并重新开源共享一下。

关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完善了一下原有的项目,并重新开源共享一下。

背景

对react native这个技术关注很久了,去年也花了很长时间学习,但中途因为时间问题没有进行更深入的学习。当时,react native还存在很多坑,使用起来不太方便。一年过去,现在重新开始关注react native,发现react native已经将原有的很多问题解决,相比当年版本,有太多的进步。现在将原有项目重构并重新发布到github。

项目简介

基于博客园的接口,开发的一个博客的app工具,包括个人博客、博客首页、博客详情,后续会逐渐完善评论、推荐、以及新闻等相关模块。

img_a0420ab1fd2d10fa36e0cd9d40003ab9.jpe

使用的主要技术和插件:

插件 说明
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组件

项目结构

目录 说明
action redux中的action
common 通用的js常用函数
component 自己的UI组件
config 项目的配置信息,需要改成自己项目的,调整这里。
constant 定义的一些常量
middleware react middleware log,记录state日志
reducer redux中的reducer
service 网络请求,调用接口相关
style 样式
view 页面page

代码全部在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

img_0b5f11cf82776c7f5db7b411032152c9.jpe
目录
相关文章
|
20天前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
64 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
2月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
230 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
3月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
164 4
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
移动开发 小程序 开发工具
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
467 1
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
123 1
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1776 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
102 2