react-native试玩(34)-配置Android开发环境

Android Setup

Node

之前是安装iojs，现在又改为node了，安装的版本为最新版本4.0:

nvm install node######################################################################## 100.0%Checksums emptyNow 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.jsreact-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 AwesomeProjectThis 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.nodereact-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.javaTo run your app on iOS:   Open /Users/wuxian/Documents/sourcecode/self/react-native/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode   Hit Run buttonTo 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

目录结构：

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
Already downloaded: /Library/Caches/Homebrew/android-sdk-24.3.3.zip
==> Downloading 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后),运行效果如下:

注意

5.0以下的手机可以通过wifi连接，然后在Dev Settings中配置JS bundle的地址。

开发者菜单

摇晃手机或者点击菜单栏