第一、二步就不说了,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
在使用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并没有监听到工程所在目录。贴一下运行效果图吧:
如果有疑问的地方可以问我,我们一同探讨。