美文网首页微信小程序开发React NativeReact Native经验分享
一个上架了的React Native项目实战总结

一个上架了的React Native项目实战总结

作者: CrazyCodeBoy | 来源:发表于2016-10-23 23:25 被阅读37569次

查看此项目的:视频开发教程

喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫trending,但这个功能只能在网页上查看,
而且在手机上浏览显示效果很不友好,而我想在地铁上,餐厅,路上等空余的时间使用它,所以我需要一款带有这个功能的App,
不仅于此,我还想要在这款App上查询GitHub上我所喜欢的项目,甚至在手机没网的时候也能看到,而且我想要我的iOS和Android手机都能使用这款App,
于是GitHub Popular便诞生了。

这个项目满足了我如下3方面的需求:

  1. 在手机App上也可以使用GitHub 的trending功能来查看最热最火的开源项目。
  2. 在手机App上也可以搜索GitHub上的开源项目,并且可以进行查看、收藏、分享等操作。
  3. 可以订阅我所喜欢的标签或语言,让感兴趣的热门项目一个不漏。
githubpupulargithubpupular

开发环境及工具

环境:

  • OSX:10.11.6
  • Node.js:6.3.1
  • react-native:0.32.0

工具:

  • Git
  • WebStorm
  • AndroidStudio
  • Xcode

所用技术与第三方库

所用技术

  • ES5/ES6
  • React
  • Flexbox
  • AsyncStorage
  • fetch api
  • Native Modules

第三方工具

  • react-native-check-box
  • react-native-easy-toast
  • react-native-splash-screen
  • react-native-htmlview
  • react-native-parallax-scroll-view
  • react-native-scrollable-tab-view
  • react-native-sortable-listview
  • react-native-tab-navigator

功能流程图

GitHub Popular-功能结构图GitHub Popular-功能结构图

总结

此项目是基于目前比较火的React Native技术架构的,也用到一些Android和iOS技术,其中Android、iOS两端代码复用率有90%之多,该项目占据我不少业余时间,不过总算研发完成,并成功上架。在此过程中填了不少的坑,包括GitHub没有开放trending的Api,需要自己动手实现它,以及自定义主题等等,后期有时间会整理出来分享给大家。

GitHub Popular的Android版本已上架,大家可以从百度手机助手应用宝上下载使用,iOS版就差一个99刀的账号就可以上架了,囊中羞涩呜呜~~~~。项目开源在GitHub上供热爱移动开发的小伙伴学习研究,喜欢的小伙伴不要忘记点个赞支持一下哦。

推荐学习:视频教程《React Native开发跨平台GitHub App》

最后

既然来了,留下个喜欢再走吧,鼓励我继续创作(_)∠※

如果喜欢我的文章,那就关注我的博客@ devio.org吧,让我们一起做朋友~~

戳这里,加关注哦:

微博:第一时间获取推送
个人博客:干货文章都在这里哦
GitHub:我的开源项目

相关文章

网友评论

  • c998d65fb9b0:请问第二个视频是第一个的更新版吗?
    CrazyCodeBoy:@iOSDev013 最新版在这里http://coding.imooc.com/class/89.html
  • 655e8ea0d04b:请问一下,现在APP上架,RN能过审吗?
    CrazyCodeBoy:@hm_liu 可以的
    CrazyCodeBoy:@hm_liu 可以的
    CrazyCodeBoy:@hm_liu 可以的
  • nickgao:https://www.npmjs.com/package/react-native-parallax-scroll-view这个库安装完运行不了,这个库是不是坏了
  • Thomas__Yang:GitHub Popular 有Bug啊,任何一个开源条目点进去,里面任何一个控件点击都无响应,比如README.md 下方的“view all of README.md”查看完整的readme是无效的,除了上方的菜单按钮,GitHub原有页面的其他可点击的所有控件均无响应,望及时修复。(Android 6.0 | 小米4)
  • Maud未来:我想问下,功能流程图是用什么工具画的?
  • iOSTbag:你好 我想问一下 现在React Native 的 APP 可以上架AppStore 么 动态下载js文件 实现热更新的话 急急急
    CrazyCodeBoy:@iOSTbag 可以的
  • 程序猿bug鱼:虽然一直不是很看好React Native 但是马上了以后学
  • 8a420e49153d:亲,苹果有没有找你们麻烦.
  • Jerry沈:componentWillUnmount() {
    this.props.homeComponent.removeSubscriber(this.onSubscriber);
    }

    onSubscriber = (preTab, currentTab)=> {
    var changedValues = this.props.homeComponent.changedValues;
    if (changedValues.my.themeChange && preTab.styles) {
    this.setState({
    theme: preTab
    })
    return;
    }
    if (currentTab != FLAG_TAB.flag_trendingTab)return;
    if (FLAG_TAB.flag_trendingTab === currentTab && changedValues.my.languageChange) {//从设置页面切换过来
    this.props.homeComponent.onReStart(FLAG_TAB.flag_trendingTab);
    }
    }
    this.onSubscriber调用的时候是不用传参吗?preTab ,和currentTab 的值是哪来呢,onSubscriber的值又是什么呢
    新手,望解答
  • 袁俊亮技术博客:大神,Github上的项目在本地跑IOS的时候跑步起来,需要什么配置吗?我自己的ReactNative项目可以跑起来
  • b8289e9ad07f:学习😊
  • 4f47a4f7d2bd:(android)源码运行出来的程序很卡、下载上传到市场上的app很流畅。。请问博主有优化过后的代码吗 :grin:
  • xhzth70911:下载后缺少RCTRootView.h文件 。
    在linux下找这个/GitHubPopular/node_modules/react-native/React/Base/ RCTRootView.h目录
    没有, 下面是终端输出:
    xinjianbaodeiMac:GitHubPopular-master xinjianbao$ cd node_modules/react-native/React/Base/RCTRootView.h
    -bash: cd: node_modules/react-native/React/Base/RCTRootView.h: No such file or directory
  • 55305540f175:厉害啊我的哥
  • 1a625b3493ea:危机感瞬间袭来
  • fe303f7f8a57:能问问你是怎么支持多分辨率的吗?比如设计在1080*720分辨率的机子上,如何让它能很好的效果现实在1920*1080分辨率的机子上呢,如果按前者的设计,放在后者的机子上会非常大。
  • aiyoLZH:博主,能说下关于React-Native第三苦使用原理吗?我在package.json里面看到了依赖,还有个问题为什么6.0一运行就崩溃,像网络权限,6.0也不需要运行权限呀!!
  • 一步一年华:为什么Custom Language没有android呢??
    CrazyCodeBoy:@一步一年华 可以在Custom Key中订阅Android,Android不是语言
  • _老妖怪:收藏先、等有机会去看看
  • 最最最最醉人:很好。哥们你是怎么学习react native的呢,我看了一下你的github里有一些教程的总结,不知道直接看那个是否可以呢?主要是做android的,有一些HTML,CSS,JS的基础。希望指导一下,谢谢
    CrazyCodeBoy: @最最最最醉人 加群交流吧点击链接加入群【React Native学习交流群】:http://jq.qq.com/?_wv=1027&k=40w6I1F
  • zym27:有心 有力
  • e89fedc31d36:赞赞赞 :+1: :+1: 学习了,写得非常清晰,想了解React Native的非技术人员也能学习到。
  • 一只霸天犬v:请问github上 iOS的下载下来怎么找不到RCTRootView呢
    CrazyCodeBoy:@小仙儿v 看这里有没有你想要的https://github.com/crazycodeboy/GitHubPopular/issues
  • Easy_VO: :smirk: 无情点赞
  • 夜_阑珊:屌屌屌!收藏了,正想研究这一块
  • whyask:刚接触react native,想问问为什么每次我新建一个项目(react-native init xxx)的时候都很慢,基本不会动…
    _老妖怪:@whyask 很正常、它需要从远程服务器下载react-native的那些组件包、耐心等待即可、几分钟而已
  • 代码诗人芋头:楼主有兴趣换一份工作么?
  • me007:楼主,我运行缺少RCTRootView.m怎么办~~已经npm i了
    me007:@不要感冒y永j 还有两个报错,在报错的c函数前加上(void)
    me007:@不要感冒y永j 已经解决了,npm i之后要clean一下
  • 韩大熊宝要姓张:感谢分享.
  • 862c9fb99650:学习学习,没接触react native😱
  • 凯撒公猿:iOS版出了没?
    凯撒公猿:@CrazyCodeBoy 好人:kissing_heart:
    CrazyCodeBoy:@一个逗比 iOS版已上线http://www.devio.org/io/GitHubPopular/
    CrazyCodeBoy:@一个逗比 已提交App Store,审核成功会告知大家
  • 夏天爱大树:单词打错了,是trending不是treding
    d0c8643cf07f:开启学习模式
    Jerry沈:componentWillUnmount() {
    this.props.homeComponent.removeSubscriber(this.onSubscriber);
    }

    onSubscriber = (preTab, currentTab)=> {
    var changedValues = this.props.homeComponent.changedValues;
    if (changedValues.my.themeChange && preTab.styles) {
    this.setState({
    theme: preTab
    })
    return;
    }
    if (currentTab != FLAG_TAB.flag_trendingTab)return;
    if (FLAG_TAB.flag_trendingTab === currentTab && changedValues.my.languageChange) {//从设置页面切换过来
    this.props.homeComponent.onReStart(FLAG_TAB.flag_trendingTab);
    }
    }
    this.onSubscriber调用的时候是不用传参吗?preTab ,和currentTab 的值是哪来呢,onSubscriber的值又是什么呢
    新手,望解答
    CrazyCodeBoy:@夏天爱大树 谢谢反馈,已纠正
  • kidz:关注
  • 苏楠雮:这个是干嘛的?
    CrazyCodeBoy:@不忧不惧的柳下惠 这里有说明:https://github.com/crazycodeboy/GitHubPopular
  • 街灯下de橱窗:请问这个图是用什么工具画的,感觉非常简洁明了
    Easy_VO:@CrazyCodeBoy mac上的ps有这个插件吗,我好像没找到,求地址 :sweat:
    街灯下de橱窗:@CrazyCodeBoy 谢谢
    CrazyCodeBoy:@街灯下de橱窗 一个Photoshop的插件EasyMockups
  • 只有NO1:这么努力做的app怎么能还不赶紧上架App Store,吃咸菜也要买个帐号
    CrazyCodeBoy:@只有NO1 iOS版已上线http://www.devio.org/io/GitHubPopular/
  • Rchongg:学习react native 是不是先要学习reactive 啊 ? 😊
    229b4cd2ca71:我知道你说的是需不需要先学习 react, 两个差不多,先学习哪个都可以,思路是一样的
    87e8de93a8bc:@Rchongg 两个完全不同的框架。。。
    你是在开玩笑 还是真不知道。。。
  • 江水东流:mac安装Androidstudio jdk老装不上怎么办啊?
    江水东流:@CrazyCodeBoy 明天再看看,以前做的,最近没搞
    CrazyCodeBoy: @江水东流 有提示信息吗
  • CoderMrGuo:下载后缺少RCTRootView.h文件
    CrazyCodeBoy:@CoderMrGuo RCTRootView.h为react-native的库文件,在/GitHubPopular/node_modules/react-native/React/Base/ RCTRootView.h目录下,你在检查一下你的配置
    CoderMrGuo:@CrazyCodeBoy 以前配置过,是不是上传遗失文件了
    CrazyCodeBoy:@CoderMrGuo react-native环境配正确了吗,更多问题可参考:https://github.com/crazycodeboy/GitHubPopular/issues
  • 梁同桌:说真的,我愿意帮你把苹果版本发布到app Store, 我对 React Native 了解就仅仅几篇文章。
    up主学习路线是什么?
    我有node.js 和 一些web前端的 了解, 熟练Swif,OC开发ios
    梁同桌:@梁同桌 太激动了打错很多错别字, Node.js Web Swift Objective-C iOS
    梁同桌:非常感谢 :smiley:
    CrazyCodeBoy:@梁同桌 [React Native 研究与实践]https://github.com/crazycodeboy/RNStudyNotes这里有一些教程看能不能帮到你,另外,你也可以加入[React Native学习交流群]165774887跟大家一起学习讨论
  • Bastionhh:支持
  • zhouhao_180:好厉害
  • CodingShell:我刚刚下载了下了,做的超级棒!正好我最近也需要trending的api~顺便学习下你的react开发套路

本文标题:一个上架了的React Native项目实战总结

本文链接:https://www.haomeiwen.com/subject/fywkuttx.html