React Native開發環境配置

到如今React Native已經進化了很多版本,開發環境的配置也發生了一些改變,本文僅供參考,請按照官方指引配置,防止某些細節出入導致配置失敗。官方英文版配置說明

React Native(以下簡稱RN)的開發環境配置直接參考官方文檔即可完成,不過對小白來說東西有點多,有些名詞不是很好理解,這里就官方的安裝文檔稍微展開說一下。

中文版配置說明:這個版本來自極客學院的翻譯版,不過和官方的版本相比略有滯后,不過照著安裝也問題不大。
官方英文版配置說明:英文沒問題的可以直接看這個版本。

首先說明下,目前RN開發只能在OSX平臺下進行,也就是只有iOS版本的開發組件,預計10月份發布支持Android的版本。

環境需求:
1.Xcode 6.3以上版本

2.需要安裝Homebrew,這貨又叫brew,是在OSX平臺上的軟件包管理工具,可以理解為類似Linux平臺下(如Ubuntu)的apt-get、(CentOS下的)yum等功能,在配置RN環境中,Homebrew用來安裝RN開發所需的三個軟件包(io.js, watchman, flow)
2.1.Homebrew官方網站(簡體中文版)
2.2.安裝,按照官網的命令行在命令終端輸入:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"即可
2.3.擴展閱讀:
-Homebrew的安裝與使用
-使用brew安裝軟件

3.安裝io.js
3.1.在之前RN開發配置中,使用的并不是io.js,而是node.js,簡單來說,io.js是后者的一個分支,按照RN的配置手冊中的描述,這是個更加摩登的node.js

3.2.安裝io.js有兩種方式(之一)
3.2.1.使用nvm方式安裝,好吧,這里又跑出來個nvm,這個可以理解為是個io.js以及node.js的版本管理工具(因為這兩貨升級太快了,跟不上節奏啊,摔),可以使用nvm來安裝io.js、node.js,同時也能用來切換以及升級它們的版本
3.2.2.既然nvm也是個第三方軟件工具包,那么也可以用前面提到的Homebrew安裝
3.2.3.直接在命令終端輸入:brew install nvm 一陣代碼翻滾后就好了,當然可能會提示你設置環境變量什么的,照著復制粘貼命令就可
3.2.4.安裝好了nvm,該安裝io.js了,直接輸入:nvm install iojs && nvm alias default iojs
3.2.5.擴展閱讀:
-Node.js 安裝與版本切換教學 (for MAC)
-利用n和nvm管理Node的版本

3.3.安裝io.js有兩種方式(之二)
3.3.1.直接使用Homebrew安裝,輸入命令:brew install iojs && brew link iojs --force
3.3.2.值得注意的是,如果在安裝io.js之前你的環境已經安裝了node.js,那么需要執行:brew unlink node 命令來解除相關引用

3.3.擴展閱讀:
-Node.js也分裂,核心開發者創建分支io.js

4.安裝watchman
4.1.直接輸入命令:brew install watchman 靜看代碼翻滾

5.安裝flow
5.1.直接輸入命令:brew install flow 靜看代碼翻滾

6.中間小結,其實到這里,RN的開發環境所需的東西都已經安裝完了,是不是覺得少了點什么。嗯,你的直覺是對的,天朝程序猿都被虐慣了,太順利反而不正常啊,啊哈哈哈哈哈(帶著淚。。。),想要跑起RN的Demo來,還得干點什么,那就繼續看吧。

7.快速開始之安裝React Native命令行工具
7.1.在手冊中,(理論上)只需要輸入給出的那行命令(先別著急輸入!):npm install -g react-native-cli (不一定)就行了
7.2.都說了哪有那么簡單嘛!npm是什么?先解釋下,Node Package Manager(node包管理器),前面說了io.js與node.js,這兩貨可以理解為(同源,一個爹生的)運行js的平臺,相應的也有很多第三方js功能包,react-native-cli命令工具就是其中的一個,安裝他們就需要npm了
7.3.但是,這些功能包的源服務器一般都是在國外,有時候說不定就被GFW給認證了,所以你運行上面那行命令也是白給啊
7.4.好在有國內的好心人做了(淘寶NPM)鏡像,10分鐘同步一次,這樣就無痛安裝了(廢話好多啊)
7.5.所以得做點設置,原理就是定義一個新的npm命令(引用、或者叫別名),比如cnpm,將這個命令指向的源服務器指向國內鏡像即可,在命令終端輸入:npm install -g cnpm --registry=https://registry.npm.taobao.org
7.6.所以開始說的那行命令改為:cnpm install -g react-native-cli 輸入即可
7.7.擴展閱讀:
-國內優秀npm鏡像推薦及使用
-淘寶 NPM 鏡像
-React Native第一課

8.總結,終于差不多要結束了,盤點下我們都干了點啥
8.1.安裝了一個OSX系統下的第三方軟件工具包管理工具:Homebrew
8.2.然后使用Homebrew安裝了4個第三方軟件工具包(nvm, io.js, watchman, flow),后三個是RN開發所需要的軟件包
8.3.在開始RN開發前需要配置一個RN命令行,為了配置安裝這個命令,對io.js的npm命令進行了修改

完畢

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容