前言
隨著React Native 0.47的發(fā)布，該框架確實(shí)是值得我們好好的去學(xué)習(xí)一番了。不要問(wèn)我什么是React Native。
- React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)，構(gòu)建世界一流的原生APP。
- React Native著力于提高多平臺(tái)開發(fā)的開發(fā)效率 —— 僅需學(xué)習(xí)一次，編寫任何平臺(tái)。(Learn once, write anywhere)
- Facebook已經(jīng)在多項(xiàng)產(chǎn)品中使用了React Native，并且將持續(xù)地投入建設(shè)React Native。
話不多說(shuō)，我們要做的第一件事就是搭建一下React Native的開發(fā)環(huán)境。
在MAC上搭建React Native開發(fā)環(huán)境
1. 安裝Homebrew，Homebrew是Mac系統(tǒng)的包管理器，用于安裝Node JS和一些其他必需的工具軟件。
- 終端命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local目錄不可寫的權(quán)限問(wèn)題。可以使用下面的命令修復(fù)：
sudo chown -R `whoami` /usr/local
這個(gè)時(shí)候需要你的登陸mac的密碼，輸密碼的時(shí)候不可見(jiàn)，不用管直接輸入完畢回車即可。
2. 安裝Node，使用Homebrew來(lái)安裝Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文發(fā)布時(shí)Homebrew默認(rèn)安裝的是最新版本，一般都滿足要求。
- 終端命令
brew install node
安裝完node后，可以設(shè)置npm鏡像以加速后面的操作（有加速工具的可以跳過(guò)此步驟及第3步）。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
3. Yarn、React Native的命令行工具（react-native-cli）
- Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
- 終端命令：
npm install -g yarn react-native-cli
安裝完yarn后也要設(shè)置鏡像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
注：目前npm5（發(fā)文時(shí)最新版本為5.0.4）存在安裝新庫(kù)時(shí)會(huì)刪除其他庫(kù)的問(wèn)題，導(dǎo)致項(xiàng)目無(wú)法正常運(yùn)行。請(qǐng)盡量使用yarn代替npm操作。
4. 支持Xcode的版本。React Native目前需要Xcode 8.0 或更高版本。
以上是配置React Native必需的插件及其工具。
以下的步驟是建議安裝的工具。
5. 推薦安裝Watchman。 Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）。
- 終端命令：
brew install watchman
6. 推薦安裝Flow。 Flow是一個(gè)靜態(tài)的JS類型檢查工具。譯注：你在很多示例中看到的奇奇怪怪的冒號(hào)問(wèn)號(hào)，以及方法參數(shù)中像類型一樣的寫法，都是屬于這個(gè)flow工具的語(yǔ)法。這一語(yǔ)法并不屬于ES標(biāo)準(zhǔn)，只是Facebook自家的代碼規(guī)范。所以新手可以直接跳過(guò)（即不需要安裝這一工具，也不建議去費(fèi)力學(xué)習(xí)flow相關(guān)語(yǔ)法）。
- 終端命令：
brew install flow
7. 推薦安裝WebStorm來(lái)編寫React Native應(yīng)用，以前我們?cè)赬dode里敲代碼，現(xiàn)在基本是在WebStorm里操作。
- WebStorm安裝鏈接：傳送門
截止到這里，我們必需的，輔助的都已經(jīng)安裝完畢。
測(cè)試安裝WebStorm應(yīng)用
1.打開終端。cd到目標(biāo)目錄。
2.初始化程序項(xiàng)目,這里假設(shè)項(xiàng)目demo命名為：RNTbGrimDemo
react-native init RNTbGrimDemo
注：這里的init命令默認(rèn)會(huì)創(chuàng)建最新的版本，而目前最新的版本為0.47，所以創(chuàng)建好的項(xiàng)目打開可能會(huì)報(bào)一些亂七八糟的頭文件找不到之類的錯(cuò)誤，官方說(shuō)明：
可以使用--version參數(shù)（注意是兩個(gè)杠）創(chuàng)建指定版本的項(xiàng)目。例如react-native init RNTbGrimDemo --version 0.44.3。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)。
初始化好的項(xiàng)目打開如下：
3.指定版本號(hào)創(chuàng)建后，打開項(xiàng)目確認(rèn)能夠正常編繹。可以選擇在Xcode中運(yùn)行，也可以在終端運(yùn)行。
react-native run-ios
4.如果要修改項(xiàng)目，請(qǐng)用上述安裝的webStorm打開項(xiàng)目修改并運(yùn)行（command+R）。如下 ：
本文完結(jié)。
