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

Android Setup

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

目录结构：

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的地址。

开发者菜单

摇晃手机或者点击菜单栏