来源：蜘蛛抓取(WebSpider)
时间：2016-08-14 18:44
标签：
学习reactnative需要具备哪些编程基础？
新人，只有简单的C、html、css基础，想学reactnative，目前有点不是很清楚学习reactnative前需要具备哪些编程基础？
按投票排序
- JavaScript basics - React basics - Flexbox
苹果笔记本
已有帐号？
无法登录？
社交帐号登录尊重版权,未经授权不得转载
本文来自:江清清的技术专栏()
今天我们继续来看一下从源代码进行编译React Native模块详解，该适配Android模块开发。
刚创建的React Native技术交流3群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
如果你想使用官方最新功能，或者使用官方的修复Bug补丁代码，或者去使用官方现在还没有正式发布的新功能以及维护自己的功能代码(不能合并到核心版本代码)。那么你需要通过源代码进行编译React Native。
(二)前提环境条件
首先确保你已经正确安装了Android SDK,并且在终端运行run命令就可以打开Android SDK Manager。
确保以下4点内容已经被正确安装以及配置：
①.Android SDK版本Version 23 (build.gradle文件中compileSdkVersion标签版本号)
②.SDK build tools Version 23.0.1 (build.gradle文件中buildToolsVersion标签版本号)
③.Android Support Repository&=17(Android支持库)
④.Android NDK (下载并且解压配置具体查看和)
接下来设置Gradle指向当前安装的Android SDK:你可以选择配置$ANDROID_SDK和$ANDROID_NDK环境变量，或者在clone的react-native的项目的根目录下面创建一个local.properties文件，然后作如下配置:
sdk.dir=absolute_path_to_android_sdk
(android_sdk的绝对路径)
ndk.dir=absolute_path_to_android_ndk
(android_ndk的绝对路径)
根据我本机的路径信息，实例如下:
sdk.dir=/Users/jiangqq/Documents/android-sdk-macosx
(这个是本机android sdk的绝对路径)
ndk.dir=/Users/jiangqq/Documents/android-ndk-r10e
(这个是本机的android ndk的绝对路径)
(三)源代码编译
3.1.从分支安装React Native
首先你需要从分支中进行安装react-native。例如:运行如下代码进行安装react-native主干代码:
npm install --save github:facebook/react-native#master
或者另外的方法是，你clone你的react-native仓库代码到node_modules文件夹下面，然后运行npm install命令进行相应安装
3.2.添加gradle文件配置依赖
在android/build.gradle文件中添加gradle-download-task配置依赖，具体代码如下:
dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
classpath 'de.undercouch:gradle-download-task:2.0.0'
// NOTE: Do not place your applicati they belong
// in the individual module build.gradle files
3.3.添加:ReactAndroid项目依赖
在android/settings.gradle文件中添加:ReactAndroid项目配置，具体代码如下:
include ':ReactAndroid'
project(':ReactAndroid').projectDir = new File(
rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
进行修改android/app/build.gradle文件来进行使用:ReactAndroid项目进行替代预编译配置的react-native库。例如编译项目comple project(':ReactAndroid')进行替换 compile 'com.facebook.react:react-native:0.16.+'
具体配置代码如下:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile project(':ReactAndroid')
3.4.让第三方模块使用我们开发的分支
如果你使用了第三方React Native相关的模块，你需要重写他们的依赖配置以防止他们仍然使用官方默认的react-native的库。否则你可能会遇到如下的编译错误:Error: more than one library with package name 'com.facebook.react'。解决方案:进行修改你的android/app/build.gradle文件，使用以下的实例代码进行替换compile project(':react-native-custom-module')
compile(project(':react-native-custom-module')) {
exclude group: 'com.facebook.react', module: 'react-native'
(四)通过Android Studio进行编译
如果你使用Android Studio了，那么你在主界面选择Import Project进行导入项目中的android文件夹。你应该可以点击Run按钮进行运行你的应用到设备中。但是Android Studio不会自动开启Packager。所以你需要在终端命令行中运行npm start来进行打开服务。
(五)值得注意的问题
从源码进行编译会花费大量的时间，尤其是第一次编译，该会下载大约200M左右的文件，然后进行编译代码。每一次你用库中更新react-native版本的时候，该编译的目录就可能被删除，那么所有的文件就需要重新下载了。为了解决这个问题，你可以进行修改~/.gradle/init.gradle文件来进行改变编译目录路径。具体修改方法如下:
gradle.projectsLoaded {
rootProject.allprojects {
buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
(六)错误处理
如果Gradle构建过程中遇到ndk-build错误，可以查看前面的local.properties文件配置
(七)最后总结
今天我们主要讲解学习了从源代码进行编译React Native模块详解，该适配Android模块开发。，大家有问题可以加一下群React Native技术交流3群().或者底下进行回复一下。
尊重原创，未经授权不得转载：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
打赏支持一下作者哈~
在线用户: 2今日访问: 519昨日访问: 12,645累计访问: 1,983,580【iOS干货】React-Native学习指南
React Native
React-Native专题系列文章不断更新ing(入门,组件,Api,开源项目)-最近比较火-http://www.lcode.org/react-native/
React-Native入门指南 /vczero/react-native-lesson
React-Native视频教程(部分免费) https://egghead.io/technologies/react
react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html
react-native中文文档(极客学院) /project/react-native/
react-native中文文档(react native中文网，人工翻译，官网完全同步) /docs/getting-started.html
react-native第一课/article/2783
深入浅出 React Native：使用 JavaScript 构建原生应用/FrontendMagazine/
React Native通信机制详解bang.net/tech/2698/
React Native布局篇 /a/8374
React Native 基础练习指北(一) /a/5929
React Native 基础练习指北(二) /a/7733
Diary of Building an iOS App with React Native http://herman.asia/building-a-flashcard-app-with-react-native
Use React Native in Existing iOS App http://blog-/post/use-react-native-in-existing-ios-app
React Native For Beginners - The Next Big Thing?/react-native-for-beginners/
How To Implement A Tab Bar With React Native /react-native-tab-bar/
tcomb-form-native使用视频教程(需翻墙)https://react.rocks/example/tcomb-form-native
React Native分享记录 /a/8782
React Native构建本地视图组件 https://www.dobest.me/article/11
react-native-android-lession(安卓系列教程) /yipengmu/react-native-android-lession
React Native模块桥接详解 https://www.dobest.me/article/14
React Native: 配置和起步 http://www.liaohuqiu.net/cn/posts/react-native-1/
React Native: Android 的打包 http://www.liaohuqiu.net/cn/posts/react-native-android-package/
react-native的第一课/coderyi/blog/blob/master/articles/_react-native_first_lesson.md
react.js中文文档 /
react.js入门教程(gitbook) https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
react.js快速入门教程 - 阮一峰 /blog/2015/03/react.html
react.js视频教程 http://react-china.org/t/reactjs/584
深入浅出ES6(一)：ES6是什么 q.com/cn/articles/es6-in-depth-an-introduction
深入浅出ES6(二)：迭代器和for-of循环 q.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop
深入浅出ES6(三)：生成器 Generators q.com/cn/articles/es6-in-depth-generators
深入浅出ES6(四)：模板字符串 q.com/cn/articles/es6-in-depth-template-string
深入浅出ES6(五)：不定参数和默认参数q.com/cn/articles/es6-in-depth-rest-parameters-and-defaults
深入浅出React(一)：React的设计哲学 - 简单之美 q.com/cn/articles/react-art-of-simplity
深入浅出React(二)：React开发神器Webpack q.com/cn/articles/react-and-webpack
深入浅出React(三)：理解JSX和组件q.com/cn/articles/react-jsx-and-component
深入浅出React(四)：虚拟DOM Diff算法解析 q.com/cn/articles/react-dom-diff
深入浅出React(五)：使用Flux搭建React应用程序架构q.com/cn/articles/react-flux
react-webpack-cookbook中文版http://fakefish.github.io/react-webpack-cookbook/
Flex 布局语法教程/blog/2015/07/flex-grammar.html
React 初探 /2015/04/react-explore/
React虚拟DOM浅析 /2015/10/react-virtual-analysis-of-the-dom/
react组件间通信 /2015/07/react-zu-jian-jian-tong-xin/
React 数据流管理架构之 Redux 介绍/2015/09/react-redux/
React服务器端渲染实践小结/3/
React Native Android 踩坑之旅 /2015/10/react-native-android-steps-on-tour/
React Native 之 JSBridge /2015/05/react-native-zhi-jsbridge/
React Native探索系列教程
React Native探索(一)：背景、规划和风险q.com/cn/articles/react-native-overview
React Native探索(二)：布局篇q.com/cn/articles/react-native-layout
React Native探索(三)：与 react-web 的融合 q.com/cn/articles/react-native-web
研究源码也是一个很好的学习方式
官方演示App /facebook/react-native/tree/master/Examples
react-native-dribbble-app /catalinmiron/react-native-dribbble-app
Gank.io客户端 /Bob1993/React-Native-Gank
Leanote for iOS(云笔记) /leanote/leanote-ios-rn
ReactNativeRubyChina /henter/ReactNativeRubyChina
HackerNews-React-Native/iSimar/HackerNews-React-Native
React-Native新闻客户端 /tabalt/ReactNativeNews
newswatch(新闻客户端) /bradoyler/newswatch-react-native
buyscreen(购买页面) /appintheair/react-native-buyscreen
V2EX客户端 /samuel1112/v2er
react-native-todo /joemaddalone/react-native-todo
react-native-beer /muratsu/react-native-beer
react-native-stars /86/react-native-stars
模仿天猫首页的app/hugohua/react-native-demo
ReactNativeChess /csarsam/ReactNativeChess
react native 编写的音乐软件 /Johnqing/miumiu
react-native-pokedex /ababol/react-native-pokedex
CNode-React-Native /SFantasy/CNode-React-Native
8tracks电台客户端 /voronianski/EightTracksReactNative
React-Native实现的计算器/yoxisem544/Calculator-using-React-Native
房产搜索app /jawee/react-native-PropertyFinder
知乎专栏app /LeezQ/react-native-zhihu-app
ForeignExchangeApp /peralmq/ForeignExchangeApp
Segmentfault 客户端 /fakefish/sf-react-native
糗事百科app /stormhouse/QiuShiReactNative
孢子社区app /Hi-Rube/baoz-ReactNative
深JS app/fraserxu/shenjs
Den - 房屋销售app* /asamiller/den
Noder-cnodejs客户端/soliury/noder-react-native
知乎日报Android版 /race604/ZhiHuDaily-React-Native
ziliun-react-native/sonnylazuardi/ziliun-react-native
react-native-weather-app/shevawen/react-native-weather-app
React Native Sample App(Navigation,Flux)/taskrabbit/ReactNativeSampleApp
TesterHome社区app /qddegtya/A-ReactNative-TesterHome
Finance - 股票报价app /7kfpun/FinanceReactNative
shopping - 购物app /bigsui/shopping-react-native
zhuiyuan - 追源cms app /kazaff/ZhuiYuanDemo
uestc-bbs-react-native - UESTC清水河畔RN客户端(with Redux)/just4fun/uestc-bbs-react-native
react-native-nw-react-calculator(iOS/Android、Web、桌面多端)/benoitvallon/react-native-nw-react-calculator
react-native-nba-app /wwayne/react-native-nba-app
由于已经有较好的组件库网站，这里就不做总结。可以直接查看如下网站，过后可能精选一部分优质组件出来 :P
React-native组件库(比较全的组件库) http://react.parts/
React Native Modules /
最佳轮播类组件 /leecade/react-native-swiper
React Native Router /t4t5/react-native-router
下拉刷新组件 /jsdf/react-native-refreshable-listview
模态框 /brentvatne/react-native-modal
react-native-navbar /react-native-fellowship/react-native-navbar
滚动轮播组件/appintheair/react-native-looped-carousel
HTML显示组件 /jsdf/react-native-htmlview
Material React Native (MRN) - Material Design组件库 /binggg/mrn
react-native-gitfeed - GitHub客户端(iOS/Android) /xiekw2010/react-native-gitfeed
react-native-snippets(代码提示) /Shrugs/react-native-snippets
react-native-babel(使用ES6 ) /roman01la/react-native-babel
sqlite for react-native /almost/react-native-sqlite
gulp-react-native-css(就像写css一样写React Style) /soliury/gulp-react-native-css
rnpm(React Native Package Manager) /rnpm/rnpm
资源网站React-native官网
http://facebook.github.io/react-native/
React-China社区 http://react-china.org/
React Native中文社区 http://bbs./
React-native组件库(比较全的组件库)
http://react.parts/
React Native Modules /
Use React Native 资讯站(使用技巧及新闻) /
11款React Native开源移动 UI 组件 http://www.oschina.net/news/61214/11-react-native-ui-components
稀土掘金的 React 标签 http://gold.xitu.io/#/tag/React.jshttp://gold.xitu.io/#/tag/React
跨平台开发时代的 (再次) 到来？( Xamarin，NativeScript 和 React Native
对比)/2015/03/cross-platform/
谈谈 React Native - 唐巧/blog//talk-about-react-native/
如何评价React-Native? /question//answer/
React Native概述：背景、规划和风险http://div.io/topic/938
Native与Web的融合 - Qcon中React-Native演讲 q.com/cn/presentations/the-fusion-of-native-and-web
更多精彩，关注黑马程序员官方微信号吧！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
在刚刚结束的Facebook f8开发者大会不久。FB开源了自己的f8 App。
界面和体验都是相当精美的。
React Native
项目用的自己啊的React Native，可以同时build iOS和 Android.相信不少学习react native的人也希望看看FB团队自己怎样去写App的吧。正如介绍中一样，我们可以看到他们所用到的一些关键词:React Native,Redux,Relay,GraphQL。
环境需要React Native,CocoaPods 1.0+ (only for iOS),MongoDb（服务端使用）
git clone项目
$ git clone /fbsamples/f8app.git $ cd f8app
安装依赖(npm v3+):
$ npm install $ ( pod install) # only for iOS version
打开mongodb 确保运行起来:
$ lsof -iTCP:27017 -sTCP:LISTEN
或者使用mongo server, setDATABASE_URI:
$ export DATABASE_URI=mongodb://example-:1337/my-awesome-database
启动 Parse/GraphQL servers:
$ npm start
$ npm run import-data
Make sure everything works by visiting:
Parse Dashboard:
运行 Android:
$ react-native run-android $ adb reverse tcp:8081 tcp:8081 # required to ensure the Android app can $ adb reverse tcp:8080 tcp:8080 # access the Packager and GraphQL server
$ react-native run-ios
& 相关主题：
下一篇：没有了
