🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
> [Android Setup](http://facebook.github.io/react-native/docs/android-setup.html) ## Node 之前是安装iojs,现在又改为node了,安装的版本为最新版本4.0: ~~~ nvm install node ######################################################################## 100.0% Checksums empty Now using node v4.0.0 (npm v2.14.2) ~~~ ## react-native-cli 安装新版本的`react-native-cli`: ~~~ npm install -g react-native-cli /Users/wuxian/.nvm/versions/node/v4.0.0/bin/react-native -> /Users/wuxian/.nvm/versions/node/v4.0.0/lib/node_modules/react-native-cli/index.js react-native-cli@0.1.4 /Users/wuxian/.nvm/versions/node/v4.0.0/lib/node_modules/react-native-cli └── prompt@0.2.14 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.7, winston@0.8.3, utile@0.2.1) ~~~ ## 创建新项目 ~~~ react-native init AwesomeProject This will walk you through creating a new React Native project in /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject > bufferutil@1.2.1 install /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/bufferutil > node-gyp rebuild CXX(target) Release/obj.target/bufferutil/src/bufferutil.o SOLINK_MODULE(target) Release/bufferutil.node > utf-8-validate@1.2.1 install /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate > node-gyp rebuild CXX(target) Release/obj.target/validation/src/validation.o SOLINK_MODULE(target) Release/validation.node > spawn-sync@1.0.13 postinstall /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync > node postinstall > fsevents@0.3.8 install /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/node_modules/react-native/node_modules/babel/node_modules/chokidar/node_modules/fsevents > node-gyp rebuild SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node react-native@0.11.0 node_modules/react-native ├── absolute-path@0.0.0 ├── graceful-fs@4.1.2 ├── progress@1.1.8 ├── stacktrace-parser@0.1.3 ├── wordwrap@1.0.0 ├── react-timer-mixin@0.13.3 ├── underscore@1.7.0 ├── image-size@0.3.5 ├── bser@1.0.0 (node-int64@0.4.0) ├── semver@4.3.6 ├── debug@2.1.0 (ms@0.6.2) ├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.1.0, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3) ├── yargs@1.3.2 ├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10) ├── promise@7.0.4 (asap@2.0.3) ├── immutable@3.7.5 ├── worker-farm@1.3.1 (xtend@4.0.0, errno@0.1.4) ├── source-map@0.1.31 (amdefine@1.0.0) ├── sane@1.2.0 (watch@0.10.0, minimist@1.2.0, exec-sh@0.2.0, fb-watchman@1.6.0, walker@1.0.7, minimatch@0.2.14) ├── rebound@0.0.12 ├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34) ├── connect@2.8.3 (methods@0.0.1, uid2@0.0.2, fresh@0.1.0, pause@0.0.1, cookie-signature@1.0.1, bytes@0.2.0, buffer-crc32@0.2.1, qs@0.6.5, cookie@0.1.0, send@0.1.2, formidable@1.0.14) ├── regenerator@0.8.36 (private@0.1.6, through@2.3.8, recast@0.10.25, commoner@0.10.3, esprima-fb@15001.1.0-dev-harmony-fb, defs@1.1.0) ├── jstransform@11.0.1 (object-assign@2.1.1, base62@1.1.0, source-map@0.4.4, esprima-fb@15001.1.0-dev-harmony-fb, commoner@0.10.3) ├── module-deps@3.5.6 (inherits@2.0.1, shallow-copy@0.0.1, duplexer2@0.0.2, minimist@0.2.0, concat-stream@1.4.10, parents@1.0.1, subarg@0.0.1, readable-stream@1.1.13, through2@0.4.2, resolve@0.7.4, stream-combiner2@1.0.2, browser-resolve@1.9.1, JSONStream@0.7.4, detective@3.1.0) ├── joi@5.1.0 (topo@1.0.3, isemail@1.2.0, hoek@2.15.0, moment@2.10.6) ├── react-tools@0.14.0-beta1 (commoner@0.10.3) ├── ws@0.8.0 (options@0.0.6, ultron@1.0.2, bufferutil@1.2.1, utf-8-validate@1.2.1) ├── yeoman-environment@1.2.7 (escape-string-regexp@1.0.3, log-symbols@1.0.2, diff@1.4.0, text-table@0.2.0, untildify@2.1.0, mem-fs@1.1.0, globby@2.1.0, grouped-queue@0.3.0, lodash@3.10.1, inquirer@0.8.5) ├── yeoman-generator@0.20.3 (path-is-absolute@1.0.0, path-exists@1.0.0, read-chunk@1.0.1, detect-conflict@1.0.0, yeoman-welcome@1.0.1, yeoman-assert@2.1.0, rimraf@2.4.3, async@1.4.2, text-table@0.2.0, mime@1.3.4, user-home@2.0.0, xdg-basedir@2.0.0, dargs@4.0.1, nopt@3.0.4, istextorbinary@1.0.2, run-async@0.1.0, mkdirp@0.5.1, shelljs@0.5.3, cli-table@0.3.1, diff@2.1.1, pretty-bytes@2.0.1, through2@2.0.0, underscore.string@3.2.2, dateformat@1.0.11, glob@5.0.14, findup-sync@0.2.1, mem-fs-editor@2.0.4, github-username@2.0.0, class-extend@0.1.1, download@4.2.0, html-wiring@1.2.0, sinon@1.16.1, gruntfile-editor@1.0.0, lodash@3.10.1, inquirer@0.8.5, cross-spawn@2.0.0) ├── babel@5.8.21 (slash@1.0.0, path-is-absolute@1.0.0, path-exists@1.0.0, fs-readdir-recursive@0.1.2, convert-source-map@1.1.1, commander@2.8.1, source-map@0.4.4, output-file-sync@1.1.1, glob@5.0.14, lodash@3.10.1, chokidar@1.0.5) └── babel-core@5.8.21 (slash@1.0.0, try-resolve@1.0.1, babel-plugin-remove-console@1.0.1, babel-plugin-inline-environment-variables@1.0.1, babel-plugin-remove-debugger@1.0.1, babel-plugin-eval@1.0.1, babel-plugin-jscript@1.0.4, babel-plugin-property-literals@1.0.1, babel-plugin-member-expression-literals@1.0.1, babel-plugin-undefined-to-void@1.1.6, babel-plugin-react-constant-elements@1.0.3, trim-right@1.0.1, to-fast-properties@1.0.1, shebang-regex@1.0.0, babel-plugin-react-display-name@1.0.3, path-exists@1.0.0, path-is-absolute@1.0.0, babel-plugin-constant-folding@1.0.1, fs-readdir-recursive@0.1.2, babel-plugin-proto-to-assign@1.0.4, babel-plugin-dead-code-elimination@1.0.2, babel-plugin-runtime@1.0.7, private@0.1.6, globals@6.4.1, esutils@2.0.2, convert-source-map@1.1.1, home-or-tmp@1.0.0, js-tokens@1.0.1, babel-plugin-undeclared-variables-check@1.0.2, line-numbers@0.2.0, debug@2.2.0, detect-indent@3.0.1, source-map@0.4.4, babylon@5.8.23, is-integer@1.0.6, repeating@1.1.3, output-file-sync@1.1.1, resolve@1.1.6, minimatch@2.0.10, bluebird@2.10.0, source-map-support@0.2.10, json5@0.4.0, regexpu@1.2.0, lodash@3.10.1, regenerator@0.8.35, core-js@1.1.4) Setting up new React Native app in /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject create .flowconfig create .gitignore create .watchmanconfig create index.ios.js create index.android.js create ios/main.jsbundle create ios/AwesomeProject/AppDelegate.h create ios/AwesomeProject/AppDelegate.m create ios/AwesomeProject/Base.lproj/LaunchScreen.xib create ios/AwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json create ios/AwesomeProject/Info.plist create ios/AwesomeProject/main.m create ios/AwesomeProjectTests/AwesomeProjectTests.m create ios/AwesomeProjectTests/Info.plist create ios/AwesomeProject.xcodeproj/project.pbxproj create ios/AwesomeProject.xcodeproj/xcshareddata/xcschemes/AwesomeProject.xcscheme create android/app/build.gradle create android/app/proguard-rules.pro create android/app/src/main/AndroidManifest.xml create android/app/src/main/res/values/strings.xml create android/app/src/main/res/values/styles.xml create android/build.gradle create android/gradle.properties create android/settings.gradle create android/app/src/main/res/mipmap-hdpi/ic_launcher.png create android/app/src/main/res/mipmap-mdpi/ic_launcher.png create android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create android/gradle/wrapper/gradle-wrapper.jar create android/gradle/wrapper/gradle-wrapper.properties create android/gradlew create android/gradlew.bat create android/app/src/main/java/com/awesomeproject/MainActivity.java To run your app on iOS: Open /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode Hit Run button To run your app on Android: Have an Android emulator running, or a device connected cd /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject react-native run-android ~~~ 目录结构: ![](https://box.kancloud.cn/2016-01-07_568e13f43f38c.jpg) ## android-sdk 安装android-sdk,并添加到环境变量中:  “`  sudo brew install android-sdk  Warning: Formula file is modified!  Building from source because Library/Formula/android-sdk.rb has local changes  To install from a bottle instead, run with –force-bottle  ==> Downloading [https://dl.google.com/android/android-sdk_r24.3.3-macosx.zip](https://dl.google.com/android/android-sdk_r24.3.3-macosx.zip)  Already downloaded: /Library/Caches/Homebrew/android-sdk-24.3.3.zip  ==> Downloading [https://android.googlesource.com/platform/sdk/+/7859e2e738542baf](https://android.googlesource.com/platform/sdk/+/7859e2e738542baf) ###### ################################################################## 100.0% ==> Caveats  Now run the ‘android’ tool to install the actual SDK stuff. The Android-SDK is available at /usr/local/opt/android-sdk You will have to install the platform-tools and docs EVERY time this formula  updates. If you want to try and fix this then see the comment in this formula. You may need to add the following to your .bashrc:  export ANDROID_HOME=/usr/local/opt/android-sdk Bash completion has been installed to:  /usr/local/etc/bash_completion.d  Warning: Could not fix /tmp/android-build-build-temp-99769/install-darwin-x86_64/lib/libz.1.dylib in /usr/local/Cellar/android-sdk/24.3.3/tools/qemu/darwin-x86_64/qemu-system-aarch64  Warning: Could not fix /tmp/android-build-build-temp-99769/install-darwin-x86_64/lib/libz.1.dylib in /usr/local/Cellar/android-sdk/24.3.3/tools/qemu/darwin-x86_64/qemu-system-mips64el  Warning: Could not fix /tmp/android-build-build-temp-99769/install-darwin-x86_64/lib/libz.1.dylib in /usr/local/Cellar/android-sdk/24.3.3/tools/qemu/darwin-x86_64/qemu-system-x86_64  ==> Summary ## 运行 这个地方要注意,需要更新`watchman`到3.7和执行`adb reverse tcp:8081 tcp:8081`(仅支持5.0后),运行效果如下: ![](https://box.kancloud.cn/2016-01-07_568e13f45c068.jpg) ## 注意 5.0以下的手机可以通过wifi连接,然后在`Dev Settings`中配置JS bundle的地址。 ## 开发者菜单 摇晃手机或者点击菜单栏 ![](https://box.kancloud.cn/2016-01-07_568e13f47ae4e.jpg)