（一）Rn搭建環(huán)境
? ? ? ?最開(kāi)始肯定是要面臨系統(tǒng)的選擇，在這里不推薦windows驾孔，雖然作者不太懂ios芍秆，但是也知道選擇了windows就意味著惯疙，在后面原生與Rn結(jié)合開(kāi)發(fā)的時(shí)候放棄了IOS，你如果不嫌麻煩硬要開(kāi)個(gè)虛擬機(jī)妖啥，那另說(shuō)霉颠。我推薦macbookpro 15寸 512G，mac上有些獨(dú)有的開(kāi)發(fā)工具可以提高效率…?
備注：在這里就順便說(shuō)一下mac的幾款常用免費(fèi)開(kāi)發(fā)軟件吧：Sublime Text3（結(jié)合幾個(gè)插件如React-native-snippets荆虱、babel蒿偎，用作免費(fèi)的React Native開(kāi)發(fā)工具，有錢(qián)的可以用webstorm）怀读、Chrome （用來(lái)調(diào)試Rn）诉位，Eclipse、office套裝（這個(gè)要破解菜枷，需要資源的話(huà)可以自己搜或找我要）苍糠、Xcode（這個(gè)要在App Store里下），Android Studio啤誊、VirtualBox岳瞭，為啥要用Virtualbox是因?yàn)槲伊?xí)慣于svn的windows版小烏龜了，弄了個(gè)win7坷衍，然后共享了下目錄…一直這樣將就著；好条舔，下面正式開(kāi)始環(huán)境搭建：
1）安裝Homebrew枫耳，Mac系統(tǒng)的包管理器，用于安裝NodeJS和一些其他必需的工具軟件孟抗。（順帶一提迁杨，這玩意兒不錯(cuò)，我的virtualbox就是用這個(gè)裝的凄硼，他會(huì)自動(dòng)配置環(huán)境變量铅协，而且卸載只要uninstall即可，不用害怕卸不干凈）
/usr/bin/ruby -e ?"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OSX 10.11（El Capitan)版本中摊沉，homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local目錄不可寫(xiě)的權(quán)限問(wèn)題狐史。可以使用下面的命令修復(fù)： sudo chown -R `whoami` /usr/local
2）homebrew安裝好后说墨，就要開(kāi)始安裝Node.js和Watchman
Nodejs是基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境骏全，他添加了一堆系統(tǒng)級(jí)（操作文件、驅(qū)動(dòng)）的API尼斧，為JS提供了服務(wù)端的開(kāi)發(fā)方案姜贡。之前有人問(wèn)過(guò)我為什么Rn開(kāi)發(fā)需要Node環(huán)境，在本章的項(xiàng)目結(jié)構(gòu)階段會(huì)詳細(xì)說(shuō)明棺棵。
Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具楼咳。安裝此工具可以提高開(kāi)發(fā)時(shí)的性能（packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）
brew install node ? ? ??
brew install watchman
備注：還有一款Flow熄捍，是一個(gè)靜態(tài)的JS類(lèi)型檢查工具，因?yàn)檎Z(yǔ)法很獨(dú)特還需要耗時(shí)間去學(xué)母怜，所以新手就不用去學(xué)了余耽，如果強(qiáng)行要用，你就裝下自己去玩吧~
brew install flow
3）xcode安裝糙申，這個(gè)就不得不說(shuō)下了宾添，Rn中文網(wǎng)上說(shuō)xcode可以是7.0以上的，但我的7.2在編譯RN中的ios項(xiàng)目時(shí)一直報(bào)錯(cuò)柜裸，錯(cuò)誤已經(jīng)忘了缕陕，就是一個(gè)東西沒(méi)有定義，刪除了以后又說(shuō)一個(gè)bgcolor沒(méi)有定義…google上各種搜疙挺，都沒(méi)有能解決的扛邑，升級(jí)xcode8又一直轉(zhuǎn)圈，沒(méi)法升級(jí)…最后是先把系統(tǒng)升級(jí)到了10.12.3 Sierra后铐然，才成功下載了xcode8蔬崩，編譯瞬間成功，可開(kāi)心了搀暑！
4）AndroidStudio環(huán)境安裝：下個(gè)jdk沥阳，在用戶(hù)的bash_profile下配環(huán)境變量，然后下個(gè)AS安裝就行了自点，可能要下一大堆sdk（沒(méi)有強(qiáng)迫癥的可以選幾個(gè)喜歡的下就行）桐罕，這個(gè)網(wǎng)上傻瓜教程一大堆，google官方的Android教程都是mac的開(kāi)發(fā)環(huán)境桂敛，弄完了創(chuàng)建個(gè)虛擬機(jī)跑個(gè)helloworld看下功炮，
備注：如果說(shuō)前面的你不翻墻還行，那這里下sdk還不翻墻你就該哭了术唬！
5）安裝Yarn薪伏、React Native的命令行工具
這里最好是翻墻，如果不翻墻安裝肯定出錯(cuò)粗仓，網(wǎng)速不穩(wěn)定的話(huà)也會(huì)出錯(cuò)嫁怀，
所以如果不翻墻的話(huà)就需要設(shè)置npm鏡像以加速后面的過(guò)程
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
（備注：npm是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題借浊，類(lèi)似于mac的homebrew眶掌，官網(wǎng)號(hào)稱(chēng)是全球最大的開(kāi)源庫(kù)生態(tài)系統(tǒng) - -）
npm install -g yarn react-native-cli
安裝完上面的命令后，就可以使用react-native的命令了巴碗，可以init一個(gè)rn項(xiàng)目朴爬，或者進(jìn)行更新等操作。
（備注：看到EACCES: permission denied這樣的權(quán)限報(bào)錯(cuò)橡淆，那么請(qǐng)參照上文的homebrew譯注召噩，修復(fù)/usr/local目錄的所有權(quán)：
sudo chown -R `whoami` /usr/local）
最后母赵，運(yùn)用 react-native init firstRNapp初始化一個(gè)Rn項(xiàng)目
(firstRNapp是項(xiàng)目名，這個(gè)初始化的時(shí)間比較長(zhǎng)具滴，如果不翻墻還沒(méi)配npm鏡像的話(huà)會(huì)出現(xiàn)報(bào)錯(cuò)凹嘲，所以這個(gè)過(guò)程出現(xiàn)的錯(cuò)誤可能是網(wǎng)絡(luò)錯(cuò)誤)
（二）RN項(xiàng)目結(jié)構(gòu)
入門(mén)項(xiàng)目中有用的就這4個(gè)目錄，
①android是編譯出來(lái)的Android工程构韵，下面有我們熟悉的build.gradle,可以導(dǎo)入為As工程周蹭。
②Ios為IOS項(xiàng)目，里面有一個(gè)
雙擊可以直接將xcode啟動(dòng)疲恢，
③上面兩個(gè)目錄可以說(shuō)是Native項(xiàng)目殼子凶朗，那么index.android.js和index.ios.js就可以看成是rn項(xiàng)目的ios和Android入口，通常情況下他倆是相同的內(nèi)容显拳，入門(mén)項(xiàng)目中就是在這兩個(gè)文件中進(jìn)行頁(yè)面的開(kāi)發(fā)棚愤。
④package.json這個(gè)就關(guān)鍵了，從內(nèi)容上就可以看出他的功能應(yīng)該是類(lèi)似于Android項(xiàng)目中的build.gradle杂数，說(shuō)明了整個(gè)Rn項(xiàng)目的名稱(chēng)宛畦，版本號(hào)，以及需要的依賴(lài)等等揍移。后面引入第三方組件其中一步次和，就是要在這些依賴(lài)中添加條目。
? ? ? 上面有個(gè)目錄node_modules那伐，這個(gè)目錄是node通過(guò)解析package.json 下載的相關(guān)依賴(lài)踏施。為啥說(shuō)它沒(méi)用呢，就是說(shuō)我們?cè)诳截悇e人的項(xiàng)目的時(shí)候這個(gè)是個(gè)完全不需要拷貝的目錄喧锦，我們只需要對(duì)好package.json读规，然后通過(guò)npm install命令抓督，就可以重新生成對(duì)應(yīng)的node_modules目錄燃少。
備注：其中node_modules和 package.json都是NodeJS相關(guān)的目錄
而且node有模塊化的思想（Rn有組件化的思想），我們寫(xiě)的頁(yè)面JS需要操作文件铃在， 引入我們的組件和格式各樣的配置阵具，不是像前端的引入方式，而是通過(guò)在首行import進(jìn)來(lái)定铜。
而且也可以看到阳液，我們?cè)陂_(kāi)發(fā)的過(guò)程中一直在不斷的使用node的npm包管理，去下載各種第三方依賴(lài)揣炕；所以帘皿，現(xiàn)在可以理解為什么Rn開(kāi)發(fā)會(huì)需要node的環(huán)境了么？
（三）Rn運(yùn)行與調(diào)試
1畸陡、IOS運(yùn)行
雙擊ios目錄下的
在右邊選擇一個(gè)分辨率低點(diǎn)的設(shè)備鹰溜，然后點(diǎn)左邊的三角編譯運(yùn)行
就可以看到項(xiàng)目運(yùn)行起來(lái)了虽填，
這里啟動(dòng)了一個(gè)React Packager和一個(gè)ios iPhone6的虛擬機(jī)，顯示了一個(gè)Rn的歡迎界面曹动。頁(yè)面的內(nèi)容就是在之前提到過(guò)的入口index文件中編寫(xiě)的斋日。至于右邊的React Packager，這是一個(gè)微型http服務(wù)器（8081）墓陈，負(fù)責(zé)把我們所有寫(xiě)的js文件以及依賴(lài)的第三方j(luò)s打包起來(lái)恶守，發(fā)給右邊的“殼子”。
如果index.ios.js發(fā)生了改變贡必，可以通過(guò)快捷鍵cmd + R,reload js
cmd + shift +h是home鍵兔港；cmd + D調(diào)出菜單
菜單中第二個(gè)是在chrome中調(diào)試用到的，
第三個(gè)如果允許的話(huà)赊级，js改動(dòng)后押框，在殼子中會(huì)自動(dòng)reload
2、Android運(yùn)行
因?yàn)槲沂茿ndroid開(kāi)發(fā)者理逊，所以習(xí)慣性的將android下面的殼子工程導(dǎo)入到AndroidStudio中橡伞，導(dǎo)入后會(huì)加載并下載一些需要的東西，然后更新gradle晋被，
更新完gradle之后同步兑徘，還會(huì)再次報(bào)錯(cuò)，然后點(diǎn)擊一下下面的Fix鏈接即可解決
因?yàn)閙ac的google原生虛擬機(jī)運(yùn)行起來(lái)十分的流暢羡洛，所以我就直接用的官網(wǎng)下的虛擬機(jī)挂脑，我用的是：
注意：ios開(kāi)啟的時(shí)候，react Packager是自動(dòng)彈出來(lái)的欲侮，如果我們之前沒(méi)有打開(kāi)react Packager崭闲，那么這樣運(yùn)行Android的殼子是無(wú)法自動(dòng)彈出的，需要我們cd到我們的Rn項(xiàng)目威蕉，然后輸入react-native start來(lái)人工開(kāi)啟服務(wù)刁俭；然后再運(yùn)行殼子。
cmd +M調(diào)出菜單韧涨，功能同ios設(shè)備上的菜單牍戚。
若想要在真機(jī)上調(diào)試，則需要在Android的配置中加ip端口虑粥，然后reload：
備注：我沒(méi)用官方的那個(gè)react-native run-android或run-ios如孝，是因?yàn)橐螺d一大堆東西，我還是習(xí)慣讓As自己來(lái)搞娩贷，選擇自己喜歡的方式啟動(dòng)即可第晰。
3、Rn開(kāi)發(fā)調(diào)試
①選擇菜單中的第二項(xiàng)，會(huì)自動(dòng)彈出Chrome茁瘦，然后用cmd +option +i
打開(kāi)控制臺(tái)罗岖，然后再console中查看我們打印的日志，
②斷點(diǎn)調(diào)試位置
