前言
借著公司給的機(jī)會(huì)榕吼，這段時(shí)間對(duì)React Native的研究饿序，算是有了一個(gè)清晰的認(rèn)識(shí)，這里不討論它能不能替代原生羹蚣，因?yàn)檫@毫無(wú)意義原探，一門技術(shù)的興起，肯定有它的必然性顽素，何況現(xiàn)在阿里的Weex咽弦，Google的Flutter，以及Koltin Native開發(fā)胁出，都在往垮平臺(tái)發(fā)展型型，趁著這些技術(shù)都還在孵化期，是不是應(yīng)該學(xué)一門來(lái)提高下綜合競(jìng)爭(zhēng)力全蝶。而選擇React Native 也是因?yàn)樗墒炷炙猓€(wěn)定，社區(qū)又多裸诽，問(wèn)題很容易解決嫂用。下面搭建環(huán)境開始介紹型凳，一步一步深入學(xué)習(xí)丈冬。
環(huán)境
像android需要Android Studio、Android SDK甘畅、JAVA JDK一樣埂蕊，React Native 也是同樣的道理往弓，它需要很多東西的支撐，才能順利進(jìn)入編碼階段（下面ReactNative簡(jiǎn)稱RN）蓄氧，下面開始搭建函似，主要介紹Mac安裝教程
Homebrew
安裝NodeJS必備系統(tǒng)管理，安裝教程 這里推薦官方地址
Node
React Native目前需要NodeJS 5.0或更高版本喉童，安裝命令
brew install node
實(shí)際開發(fā)中更推薦使用Yarn撇寞，因?yàn)閅arn是Facebook提供的替代npm的工具，可以加速node模塊的下載
brew install yarn
詳細(xì)安裝教程請(qǐng)看地址
React Native的命令行工具 react-native-cli
用于執(zhí)行創(chuàng)建堂氯、初始化蔑担、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)咽白。安裝命令如下：
npm install -g yarn react-native-cli
Xcode啤握、Android Studio
Mac系統(tǒng)通過(guò)商店安裝Xcode，Android Studio推薦官網(wǎng)下載：
到此萬(wàn)事具備晶框，只欠東風(fēng)排抬，你需要一個(gè)趁手的工具來(lái)開發(fā)，就像Android 需要Android Studio一樣授段，這里推薦WebStorm蹲蒲，官方推薦Atom但真的很難用（不推薦使用）
下載完WebStorm，下面開始就新建一個(gè)Demo了
Demo項(xiàng)目創(chuàng)建
打開WebStorm畴蒲，點(diǎn)Create New Project 選擇 React Native悠鞍，在紅色箭頭處修改Demo的項(xiàng)目名字，默認(rèn)是APP的名字模燥。
最后點(diǎn)擊Create按鈕咖祭。會(huì)進(jìn)入一段時(shí)間的構(gòu)建過(guò)程，此過(guò)程下載node_modules蔫骂，相當(dāng)于java的lib依賴么翰。構(gòu)建過(guò)程挺長(zhǎng)，這個(gè)時(shí)候你需要倒杯水辽旋，耐心等一下浩嫌。
如果你看到這個(gè)目錄結(jié)構(gòu)，恭喜已經(jīng)構(gòu)建完畢补胚，這個(gè)時(shí)候可以試著運(yùn)行下看看码耐，打開Terminal，輸入以下命令溶其，運(yùn)行Android 或者IOS項(xiàng)目
react-native run-ios?
react-native run-Android?
蘋果會(huì)自動(dòng)喚起模擬器骚腥，android 需要手動(dòng)喚起，打開Android Studio手動(dòng)喚起瓶逃。android是走的gradle構(gòu)建過(guò)程所以要注意本地的版本和此項(xiàng)目中配置的版本是否一致束铭，否則會(huì)中途失敗廓块，需要重新運(yùn)行，而且android還缺少了SDK的路徑配置契沫，導(dǎo)致第一次構(gòu)建找不到SDK带猴，這個(gè)問(wèn)題很容易解決，你需要自己手動(dòng)將已有Android Studio項(xiàng)目中根目錄中的?local.properties 文件拷貝到RN項(xiàng)目android 包目錄下懈万。
最終跑起來(lái)的效果如圖拴清，恭喜已經(jīng)成功了
到此就已經(jīng)可以進(jìn)入下一步了，進(jìn)入組件學(xué)習(xí)会通，API學(xué)習(xí)贷掖，以及跨平臺(tái)的適配問(wèn)題，在接下來(lái)學(xué)習(xí)的過(guò)程中渴语，詳細(xì)介紹苹威。
總結(jié)
總體來(lái)說(shuō)，RN對(duì)于開發(fā)者還是很友好的驾凶，有很多的特色牙甫，比如JSX以及Flexbox布局還有各個(gè)組件，最終會(huì)映射到IOS调违、Android原生組件窟哺，其實(shí)運(yùn)行起來(lái)的體驗(yàn)和原生沒(méi)有區(qū)別，最后引用官方一句話Learn Once技肩，Write Anywhere且轨，預(yù)祝RN越來(lái)越好。但個(gè)人認(rèn)為虚婿，從長(zhǎng)遠(yuǎn)來(lái)看RN是個(gè)苦差事旋奢，因?yàn)樗粩噙m配原生組件，來(lái)應(yīng)對(duì)未來(lái)的挑戰(zhàn)然痊，這點(diǎn)是個(gè)短板至朗，倒不如Flutter來(lái)得徹底，但又從開發(fā)成本剧浸，和公司利益最大化的今天锹引，還是RN更適合。
