基于react-native实现的博客园移动客户端,兼容android和ios



  • 在成都的八九月,陆续花了几个周末,拒绝了几场麻将的邀约,再加上国庆假期在老家陪父母的几天时间,基于react-native实现了一个博客园移动客户端,兼容android和ios。现分享出来,希望对大家的rn学习之路有所帮助。

    登录页面:

    alt text

    首页导航:

    alt text

    个人中心:

    alt text

    文章详情:

    alt text

    附上源码及apk体验下载地址:

    https://github.com/togayther/react-native-cnblogs

    有任何建议或问题,可留言或提交issue。作者会第一时间进行回复。祝大家工作顺利喔-_-



  • iOS无法运行
    还有在博客园创建的帐号好像不能登录
    0_1476242313554_Simulator Screen Shot 2016年10月12日 上午11.18.18.png



  • @lwvv 说:

    创建的帐号好像不能登录

    你好,IOS版本,目前暂未兼容,仅提供安卓版本。
    另外,本地手动编译调试的话,需要在文件:source/config/index.js,配置博客园接口授权信息,包括clientId, clientSecret 和 rsa 加密公钥。



  • @愤怒的晃晃 好的,谢谢了



  • 大神求救!请问一个问题,在由列表页跳转到详情页的过程中,应该应用的webview吧,html渲染也是需要时间的,这个是怎么检测到渲染完成的,还有就是这个跳转过程比较平滑,是怎么优化的?



  • @XboxYan
    你好,详情页面从接口获取的数据是 html 格式的,但在渲染的时候,解析为 react-native 的 view/text/image 等进行呈现,没有用到 webview。

    从列表页跳转到详情的时候,会有一个页面切换的划动的动画,只要这个动画没有完成( componentDidFocus 中进行控制 ),页面仅会显示一个加载圈( spinner )。页面切换动画完成后,才会进行数据渲染。这在一定程度上,避免了在页面切换的时候同步进行页面渲染,可能导致页面卡顿的问题。

    PS:好像最新版本的react-native,已经内置了 componentDidFocus 的页面生命周期事件。



  • 哦哦,componentDidFocus 这个已经实现了,就是那些html字符串怎么转换层原生的view,text那些组件?有开源工具吗?我现在是直接拼接的html字符串,但是webview在渲染html页面还是会花一点时间,所以会造成中间一种空白状态。。



  • @XboxYan
    我是引用的一个修改过的第三方组件: https://github.com/togayther/react-native-html-converter



  • @愤怒的晃晃 感谢大神,终于解决了~



  • @愤怒的晃晃 你好 请问 接口授权地址是哪里 找了下没找到



  • @随风远行
    你好,本地手动编译调试的话,需要在文件:source/config/index.js,配置博客园接口授权信息,包括clientId, clientSecret 和 rsa 加密公钥。

    对于个人开发者,向博客园申请的时候,需要提供以下信息:
    真实姓名、手机号码、常用邮箱、相关app介绍。
    邮件发送至: contact@cnblogs.com



  • 为什么注册的账号 在apk中登录不了



  • @sunday
    你好,是自己下载源码编译的apk,还是在市场下载的呢?



  • 你好!非常感谢楼主的分享虽然先前看过这个http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B。但是很希望博主能详细讲解一下本项目的导航器,项目中的Navigation、Router、routerScene。这几个文件有点晕有点不太理解里面的函数、常量什么的、



  • @arrayhua

    你好,关于Navigation、Router、routerScene等相关组件及方法的使用,我觉得你上面贴出的文章,已经描述的很清楚了哈。在博客园这个项目中,没有使用第三方的导航组件,仅仅是对上述“原生”组件进行了简单的封装: Navigation 是最上层的,然后简单封装了一个 router,增加了诸多跳转的方法(component/router),将这个 router 传给 Navigation,这样页面在切换的时候,就可以方便的获取到router对象,从而调用router自定义的方法进行页面跳转。至于 renderScene,是Navigation的一个属性,用于定义页面如何切换。你可以在源码中,将component/ Navigaion & router 结合起来看,就明白了。



  • @愤怒的晃晃 说: 你好,能否提供一套clientId, clientSecret 和 rsa 加密公钥啊? 我按你说发邮件给博客园了,但是一直没有回复



  • @liuchao1986105

    不好意思,周末有点事,现在才回复。抱歉,应博客园要求,我申请到的 clientId, clientSecret 和 rsa 不能公开,建议你直接联系博客园客服或者发布博问@dudu



  • 你好,首先非常感谢楼主分享的这个app,我下载看了一下源码,发现是用的Redux框架,请问现在开发RN基本上都用这个吗?说实话我有点看不懂呢,楼主能提示一下学些Redux 的学习资料和方法吗,谢谢楼主



  • @愤怒的晃晃 你好,正在看源码,有个问题啊,就是第一次登陆时候会出现个modal然后进登陆界面,然后登陆成功后第二次就直接进主页,这个在代码里哪里体现出现的啊?



  • @愤怒的晃晃 哦,找到了 ,checkUserToken()



  • @lh142332
    你好,我所知道的,现在redux应该是应用最广泛的flux框架哈,我个人也认为redux非常适合react及react-native的开发。学习的话,最好是有js及es6的基础,我当初是直接阅读的以下文档:
    http://cn.redux.js.org/index.html

    因为redux涉及到比较多的es6语法,尤其是箭头函数。可参考以下文档,了解一些es6的知识:
    http://es6.ruanyifeng.com/

    希望对你有所帮助。


登录后回复