> [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)
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件