Mac 搭建React Native環境遇到的坑

今天突然奇想想體驗一下傳說中的React Native，說做就做 下面記錄了我在搭建環境中遇到的一些問題：

整個的安裝過程是參考的這篇文章 http://www.cnblogs.com/jianglan/p/5027315.html

1. 因為之前有嘗試過Hexo的原因進行過Node.js的安裝，可能解除安裝的時候導致Node.js 沒有解除安裝乾淨無法重新安裝,最後找到知乎上一個介紹如何徹底刪除比較詳細的答案(https://www.zhihu.com/question/27389115/answer/36434788 作者：haochuan)，在這裡重複一下 以作備份吧

1. 刪除/usr/local/lib中的所有node和node_modules

2. 刪除/usr/local/lib中的所有node和node_modules的資料夾

3. 如果是從brew安裝的, 執行brew uninstall node

4. 檢查~/中所有的local, lib或者include資料夾, 刪除裡面所有node和node_modules

5. 在/usr/local/bin中, 刪除所有node的可執行檔案

6. 最後執行以下程式碼:

sudo rm /usr/local/bin/npm

sudo rm /usr/local/share/man/man1/node.1

sudo rm /usr/local/lib/dtrace/node.d

sudo rm -rf ~/.npm

sudo rm -rf ~/.node-gyp

sudo rm /opt/local/bin/node

sudo rm /opt/local/include/node

sudo rm -rf /opt/local/lib/node_modules

當重新安裝之後 可以用以下的方式測試是否安裝成功

建立一個js檔案程式碼如下

varhttp = require('http');

http.createServer(function(req, res) {

res.writeHead(200, {'Content-Type':'text/plain'});

res.end('Hello Node.js\n');

}).listen(8124,"127.0.0.1");

console.log('Server running at http://127.0.0.1:8124/');

輸入以下的命令

> node hello_node.js

Server running at http://127.0.0.1:8124/

如果安裝成功訪問http://127.0.0.1:8124/是可以看到nodejs安裝成功的介面。(參考 http://blog.csdn.net/jianglei421/article/details/7280577)

2.  在執行npm install -g react-native命令的時候因為-g 是全域性安裝所以需要管理員許可權 在命令列前加上sudo即可

3. 在安裝的過程中可能會遇到UNMET PEER DEPENDENCY的錯誤 

unment peer dependency錯誤

解決辦法就是在安裝的時候 指定具體的版本安裝：sudo npm install -g react@0.14.7

4. react-native, react-native-cli 傻傻分不清楚

當你終於完成了react-native安裝，即將對又一個hello world發起的時候意外又這樣出現了

Looks like you installed react-native globally, maybe you meant react-native-cli?

react-native-cli

解決辦法就是安裝下面的提示uninstall react-native 重新安裝react-native-cli 

5.  Could not connect to development server. 

人生就是坎坷啊，當你滿懷希望的看到自己的Hello World終於可以執行的時候缺出現了意外狀況，不過幹線萬能的stackoverflow 讓我又重拾了希望(http://stackoverflow.com/a/29307009)

Connection error

到此挖坑完畢！！！最後附上幾個小時的勞動成果?????

Successfully!!

最後附上幾個學習資源吧

http://www.tuicool.com/articles/zaInUbA (React Native 學習指南)

https://segmentfault.com/q/1010000004033633（npm 映象配置）

http://reactnative.cn/blog.html（React Native blog）

http://wiki.jikexueyuan.com/project/react-native/（極客學院）

https://hulufei.gitbooks.io/react-tutorial/content/introduction.html（React Native 入門教程）