安装React-native 需要的几个重要的步骤:
- OS X - This repo only contains the iOS implementation right now,and Xcode only runs on Mac.
- New to Xcode?Download itfrom the Mac App Store.
- Homebrewis the recommended way to install node,watchman,and flow.
brew install node
. New tonodeornpm?brew install watchman
. We recommend installingwatchman,otherwise you might hit a node file watching bug.brew install flow
. If you want to useflow.
第一、二步就不说了,xCode是IOS开发必备的IDE。
第三步:安装 Homebrew 这个工具是安装node watchman 的前提,首先http://brew.sh/到这个网址 按照提示 安装Homebrew工具。在命令行中输入
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
运行上面命令目前必须通过VPN才能够正确安装,这也是国内局域网的缺陷,20块钱一个月,可以买来玩一个月。不过对于一个程序员来说,VPN这个东西还是非常重要的。根据可以需要购买。
第四、五步按照提示安装即可。到目前为止环境已经搭建完成了。
之后就是验证自己安装的工具是否可用了。在命令行中输入npm start,下面是我运行的时候出现的错误以及解决方案
Watchman took too long to load
Permission settings prevent Watchman from loading. A recent update solves this,get a HEAD install of Watchman if you are experiencing this error.
brew uninstall watchmanbrew install--HEAD watchman
Quick start
npm install -g react-native-cli
react-native init AwesomeProject
原文链接:https://www.f2er.com/react/307942.html在使用nom install -g react-native-cli 会出现说
tar.unpackuntar error /Users/terrylmay/.npm/react-native-cli/0.1.3/package.tgz即解压失败。这主要是由于npm文件夹操作是需要root权限的。所以在运行该命令之前加上sudo 即可。
最后,创建AwesomeProject 工程。命令行运行完成之后,你可以看到如下输出:
CXX(target) Release/obj.target/bufferutil/src/bufferutil.o react-native@0.4.1 node_modules/react-native ├── absolute-path@0.0.0 ├── stacktrace-parser@0.1.1 ├── react-timer-mixin@0.13.1 ├── underscore@1.7.0 ├── image-size@0.3.5 ├── yargs@1.3.2 ├── debug@2.1.3 (ms@0.7.0) ├── bluebird@2.9.25 ├── optimist@0.6.1 (wordwrap@0.0.2,minimist@0.0.10) ├── rebound@0.0.12 ├── source-map@0.1.31 (amdefine@0.1.0) ├── promise@7.0.1 (asap@2.0.3) ├── chalk@1.0.0 (escape-string-regexp@1.0.3,ansi-styles@2.0.1,supports-color@1.3.1,strip-ansi@2.0.1,has-ansi@1.0.3) ├── worker-farm@1.1.0 (xtend@4.0.0,errno@0.1.2) ├── jstransform@10.1.0 (base62@0.1.1,esprima-fb@13001.1001.0-dev-harmony-fb) ├── uglify-js@2.4.20 (uglify-to-browserify@1.0.2,async@0.2.10,source-map@0.1.34,yargs@3.5.4) ├── sane@1.0.3 (watch@0.10.0,fb-watchman@0.0.0,minimatch@0.2.14,walker@1.0.6) ├── module-deps@3.5.6 (inherits@2.0.1,shallow-copy@0.0.1,minimist@0.2.0,subarg@0.0.1,stream-combiner2@1.0.2,resolve@0.7.4,parents@1.0.1,browser-resolve@1.8.2,readable-stream@1.0.33,duplexer2@0.0.2,concat-stream@1.4.8,through2@0.4.2,JSONStream@0.7.4,detective@3.1.0) ├── react-tools@0.13.1 (commoner@0.10.1) ├── joi@5.1.0 (topo@1.0.2,isemail@1.1.1,hoek@2.12.0,moment@2.10.2) ├── 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,qs@0.6.5,bytes@0.2.0,buffer-crc32@0.2.1,cookie@0.1.0,formidable@1.0.14,send@0.1.2) └── ws@0.4.31 (tinycolor@0.0.1,options@0.0.6,commander@0.6.1,nan@0.3.2) Setting up new React Native app in /Users/terrylmay/Project/react-native/react-native_project/AwesomeProject Next steps: Open /Users/terrylmay/Project/react-native/react-native_project/AwesomeProject/AwesomeProject.xcodeproj in Xcode Hit Run button这就表示 创建工程已经成功了。打开工程所在位置,在xCode中打开工程。同时进入命令行 切换到工程所在目录即/*/*/*/*.../*/AwesomeProject 下运行npm start 命令,并且运行xCode中的工程即可看到 react-native工程运行的效果了。如果遇到说在某某目录下找不到 index.ios.js这个文件,说明你打开npm server的目录是不正确的。node server并没有监听到工程所在目录。贴一下运行效果图吧:
如果有疑问的地方可以问我,我们一同探讨。