美文网首页微信小程序开发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项目可以跑起来
      • Pepsi33:学习😊
      • 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
        尘梦忆仙:开启学习模式
        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