├── .gitignore ├── doc └── React-native Android 在Jenkins上配置自动打包方案.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Built application files 2 | *.apk 3 | *.ap_ 4 | 5 | # Files for the Dalvik VM 6 | *.dex 7 | 8 | # Java class files 9 | *.class 10 | 11 | # Generated files 12 | bin/ 13 | gen/ 14 | 15 | # Gradle files 16 | .gradle/ 17 | build/ 18 | /*/build/ 19 | 20 | # Local configuration file (sdk path, etc) 21 | local.properties 22 | 23 | # Proguard folder generated by Eclipse 24 | proguard/ 25 | 26 | # Log Files 27 | *.log 28 | -------------------------------------------------------------------------------- /doc/React-native Android 在Jenkins上配置自动打包方案.md: -------------------------------------------------------------------------------- 1 | #React-native Android 在Jenkins上配置自动打包方案 2 | 使用jenkins来实现自动化构建，可以简化开发测试的流程，原来debug包都不会做混淆，现在用了jenkins会自动的打混淆包，除了环境不一样，其他配置debug和release包都一样，这样就可以避免代码混淆带来的问题，早日发现早日治疗。推荐大家在废弃的电脑上搭建一个Jenkins。具体的搭建流程见[这里](http://my.oschina.net/u/930967/blog/299058) 3 | 4 | 这里介绍一下我在项目中使用了React-native之后的jenkins配置，默认已经在jenkins上已经搭建好了普通Android的打包环境，如果想打带有React-native的apk，首先在React官方的[Generating Signed APK](https://facebook.github.io/react-native/docs/signed-apk-android.html#content)中有bundle命令来生成index.android.bundle 5 | 6 | $ react-native bundle --platform android --dev false --entry-file index.android.js \ 7 | --bundle-output android/app/src/main/assets/index.android.bundle \ 8 | --assets-dest android/app/src/main/res/ 9 | 所以我们在Android打包之前首先要执行这个命令，明确了这个区别，就开始动手了。 10 | 11 | - 首先在jenkins服务器上升级buildToolsVersion，compileSdkVersion 到23 12 | ![这里我全部升级完了](http://img.blog.csdn.net/20151128142442620) 13 | 如果下载慢，建议换成sdk.gdgshanghai.com的镜像 14 | ![sdk.gdgshanghai.com](http://img.blog.csdn.net/20151128142526224) 15 | 16 | - 接下来在服务器上搭建react-native环境 17 | 18 | 不做重复的事情，很多文章已经写的很清楚，具体搭建步骤参考下面的博客http://www.race604.com/react-native-for-android-start/ 19 | 20 | 注意一点，很多同学搭建换成后，执行 21 | react-native init AwesomeProject 22 | 会发现卡了半天还是没有成功，这个时候建议你使用 23 | npm config set registry=https://registry.npm.taobao.org 24 | 将npm的源换成淘宝镜像 25 | - 测试环境安装成功之后，开始配置我们的Jenkins 26 | 27 | 我们是通过jenkins Invoke Gradle script执行assembleQa --stacktrace task来打包的， 28 | ![Invoke Gradle script](http://img.blog.csdn.net/20151128143605795) 29 | 如果我们希望在执行这个task之前让React-native 生成index.android.bundle，那么我们可以在build.gradle写这样的task，但是这里我介绍一个更简单的方式，在jenkins中增加构建步骤->windows系统选择Execute windows batch command ||mac系统选择Excute shell 30 | ![选择Excute shell](http://img.blog.csdn.net/20151128143748789) 31 | 32 | #关键的步骤来了！！！！！ 33 | 34 | 我们按住Execute shell的右上角，将它拖动到 Invoke Gradle script的前面，这样就可以先执行Execute shell中的命令 35 | 36 | - 接下来开始写Execute shell中的命令 37 | 38 | 39 | ``` 40 | react-native bundle --platform android -dev false --entry-file react-native/index.android.js \ 41 | --bundle-output app/src/main/assets/index.android.bundle \ 42 | --assets-dest app/src/main/res/ 43 | ``` 44 | 测试一下，失败，报react-native: command not found 45 | google一下，React-native jenkins，发现没有任何相关的记录，菊花一紧，每当Stack Overflow上国外友人还没有踩过坑的时候，我就有一种使命感，难道我已经走在了全世界码农的前面？难道我就要这样走向人生颠覆了么，这样的幻觉让我像疯狗一样查资料誓要把这个问题解决，给全世界人民带来福利。 46 | 47 | 打了一针鸡血，发现jenkins的shell命令是跑在自己的Shell中的，这意味着什么？需要我们指定绝对路径，好吧，更换一成绝对路径。 48 | 49 | ``` 50 | which react-native 51 | ``` 52 | 获取react-native的绝对路径,文件路径也一并换掉，整个命令变成了 53 | 54 | ``` 55 | /usr/local/bin/react-native bundle --platform android -dev false --entry-file /Users/jenkins/.jenkins/jobs/testAndroid-qa/workspace/react-native/index.android.js \ 56 | --bundle-output /Users/jenkins/.jenkins/jobs/testAndroid-qa/workspace/app/src/main/assets/index.android.bundle \ 57 | --assets-dest /Users/jenkins/.jenkins/jobs/testAndroid-qa/workspace/app/src/main/res/ 58 | ``` 59 | 再来构建->成功。 60 | 61 | 看一下我的构建历史 62 | ![这里写图片描述](http://img.blog.csdn.net/20151128150252868) 63 | 64 | 不断的失败， 65 | 不断的解决， 66 | 我为全世界人民踩坑， 67 | 我为全世界人民探路， 68 | 我活在自我陶醉的程序员世界。 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-android-guide 2 | 致力于帮助Android开发者转react-native开发。 3 | 4 | 作为一名Android开发者，我的感觉就是，一步一卡，卡的潇洒。 5 | 6 | 但是我还是要学react-native，不要问我为什么,因为我相信一门解决了原生app，开发周期长，开发成本高，升级代价大的语言一定会火，而且react语言看起来那么熟悉，组建式的布局方式，让没有接触过web开发的我，感觉没有一点点晦涩，那么的自然，甚至体会不到web同学口中的革命性创新，native的开发者大概还会蠢萌的认为不就应该这样么? 7 | 8 | 或许你还在犹豫，一门新的语言让他再发展发展再学也不迟，但是在中国你懂的，学技术要从技术还是娃娃的时候学起。 9 | ![](http://mmbiz.qpic.cn/mmbiz/tnZGrhTk4ddPia1gx06wgm9FY6YQWH465toiclyGdeEjobOdib0Pl2SbwWof7JPlPOJwA8Ur9zs2aAO2EdW7qb4qg/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1) 10 | 11 | #新闻 12 | - [天猫技术团队使用React Native代替H5实现产品化落地](http://mp.weixin.qq.com/s?__biz=MzA3Mjk1MjA4Nw==&mid=209278158&idx=1&sn=0a6a12eeab5ed87973de055196eac5b8#rd) 13 | ###饿了么蜂鸟众包团队在react-native Android方面的实践 14 | 蜂鸟众包也许是国内首个在线上使用react-native的团队，从react-native v0.14.0 到最新的v0.18.0 踩了很多的坑，也积累的丰富的经验，现在蜂鸟众包中有通知中心和等级特权两个模块使用了react-native，欢迎下载体验。 15 | 下面是我的队友的踩坑笔记 16 | - [React-Native Android 初次踩坑之旅](http://richard-cao.github.io/2015/11/24/React-native-Android-%E5%88%9D%E6%AC%A1%E8%B8%A9%E5%9D%91%E4%B9%8B%E6%97%85/) 17 | - [饿了么React-native Android 热更新方案](http://richard-cao.github.io/2015/12/03/React-native-Android-热更新/) 18 | - [饿了么使用redux重构react-native尝试](http://richard-cao.github.io/2016/01/12/React-Native-With-Redux/) 19 | 20 | 饿了么蜂鸟众包app [下载地址](http://app.meizu.com/apps/public/detail?package_name=me.ele.crowdsource) 21 | 22 | 23 | #鸡汤总览 24 | 25 | - [了解React-native全貌加鸡汤，看完就会手痒](http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&scene=1&srcid=1119XfFA8t5QQprIjzp76fcr&key=ff7411024a07f3ebf6601418be94ccd6219ed18e580029547278b6eadd5def524defc8dbfdfcf673a7daa87723cfa4bb&ascene=0&uin=NTYzMDc5MTc1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.11.1+build(15B42)&version=11020201&pass_ticket=a82zcv0P%2B6ztN4xgcdnD%2FWtFbQjxhMOiiUJGZVbk6FUhTeozLqrMlGuES%2FvVmaI0) 26 | - [React Native 调研报告](http://blog.csdn.net/lihuiqwertyuiop/article/details/45241909?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 27 | 28 | #入门教程 29 | - [中国好教程-react native中文视频教程](http://www.ejiakt.com/album/show/211)(看视频是小白入门的很好途径) 30 | - [react-native-android 基础教程](https://github.com/yipengmu/react-native-android-lession) 31 | 32 | - [学习 React Native for Android：React 基础 ](http://hahack.com/codes/learn-react-native-for-android-02/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 33 | 34 | - [react-native实战--简单登录UI实现](https://github.com/hufeng/iThink/issues/3) 35 | 36 | - [React：组件的生命周期](http://www.ido321.com/1653.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 37 | 38 | - [React Native For Android 架构初探](http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=207782506&idx=1&sn=3ff6b03c0d59fbda406f64739d9272cf&scene=0#rd) 39 | 40 | - [React-Native-Remote-Update](https://github.com/fengjundev/React-Native-Remote-Update) (react-native-android 热更新方案) 41 | 42 | - [使用react-native中的Navigator组件进行页面导航](http://www.cnblogs.com/flyingzl/articles/4913693.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 43 | - [『译』React Mixin 的使用](http://segmentfault.com/a/1190000003016446) 44 | - [React Native专题-入门,基础,进阶提交-不断更新ing](http://www.lcode.org/react-native/) 45 | 46 | #项目级别架构flux 47 | Flux是Facebook用来构建客户端Web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。适用于react/react-native 48 | 49 | - [Facebook：MVC不适合大规模应用，改用Flux](http://www.infoq.com/cn/news/2014/05/facebook-mvc-flux/) 50 | - [谈一谈我对 React Flux 架构的理解](http://www.cocoachina.com/webapp/20150928/13600.html) 51 | - [使用 React 和 Flux 创建一个记事本应用](http://www.jcodecraeer.com/a/javascript/2015/0311/2581.html) 52 | - [Redux 项目地址](https://github.com/rackt/redux) 53 | - [React和Redux的连接react-redux](http://www.jianshu.com/p/94c988cf11f3) 54 | - [Redux 核心概念](http://www.jianshu.com/p/3334467e4b32) 55 | 56 | #踩坑列表 57 | 58 | - [react-native-android 问题汇总](https://github.com/yipengmu/ReactNative_Android_QA) 59 | 60 | - [公司同事踩坑过程中的总结](http://richard-cao.github.io/2015/11/24/React-native-Android-初次踩坑之旅/#rd) 61 | 62 | - [React-native Android 在Jenkins上配置自动打包方案](http://blog.csdn.net/mobilexu/article/details/50084115) (原创) 63 | - [Windows下搭建React Native开发环境](http://www.jianshu.com/p/3d716097fe08?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 64 | 65 | - [React Native For Android の 修改React Native为本地依赖](http://www.jianshu.com/p/cca40c19faa0) 66 | 67 | - [Android React Native使用原生模块](http://blog.csdn.net/sbsujjbcy/article/details/49953041) 68 | 69 | 70 | #React-native Android开源项目 71 | - HackerNews-React-Native https://github.com/iSimar/HackerNews-React-Native 72 | - 煎蛋客户端 https://github.com/w4lle/JianDan-React-Native 73 | - 知乎日报Android版 https://github.com/race604/ZhiHuDaily-React-Native 74 | - ziliun-react-native https://github.com/sonnylazuardi/ziliun-react-native 75 | - FinanceReactNative https://github.com/7kfpun/FinanceReactNative 76 | - DoubanMovie-React-Native（豆瓣电影）https://github.com/fengjundev/DoubanMovie-React-Native 77 | 78 | #资源列表 79 | 80 | - MRN 0.1.0发布了，MRN是一个基于React Native的Material Design风格的组件库。 81 | [官方网站 ](http://mrn.js.org) -- [Github ](https://github.com/binggg/mrn)---[示例应用在线演示](https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w) ---- [DemoAPP](https://github.com/binggg/MaterialReactNative/blob/master/android/app/build/outputs/apk/app-release.apk?) 备注，由于用了API21+的API，暂时只支持安卓5.0以上，后期会支持低版本 82 | - [react-native-viewpager](https://github.com/race604/react-native-viewpager?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io)-This is the ViewPager componnent in React Native both for Android and iOS. 83 | - [ECMAScript 6入门](http://es6.ruanyifeng.com/#README) 84 | --------------------------------------------------------------------------------