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,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,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,inquirer@0.8.5,cross-spawn@2.0.0)
├── babel@5.8.21 (slash@1.0.0,path-is-absolute@1.0.0,fs-readdir-recursive@0.1.2,convert-source-map@1.1.1,commander@2.8.1,output-file-sync@1.1.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,babel-plugin-constant-folding@1.0.1,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,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,babylon@5.8.23,is-integer@1.0.6,repeating@1.1.3,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,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的地址。
开发者菜单
摇晃手机或者点击菜单栏
原文链接：https://www.f2er.com/react/307728.html