博主最近在研究跨平臺(tái)開(kāi)發(fā)也祠，打算好好研究一下React Native這個(gè)比較被大家熟知的玩意。
昨天進(jìn)行了環(huán)境搭建和初步的學(xué)習(xí)愿棋，感覺(jué)上手還算快科展。在這里，把一些已經(jīng)發(fā)現(xiàn)的坑糠雨，提前告訴給各位才睹，希望能讓讀者們少走一些彎路。
首先說(shuō)一下無(wú)論是Mac，Windows琅攘，還是Linux垮庐，如果有能力，請(qǐng)直接去英文官網(wǎng)查看文檔乎澄，不要看中文官網(wǎng)突硝，真的有坑，稍候細(xì)說(shuō)置济。
我的環(huán)境解恰，Mac，Windows都有浙于，先說(shuō)Windows护盈。
Windows環(huán)境暫且肯定是不支持開(kāi)發(fā)iOS應(yīng)用的哈，這個(gè)大家應(yīng)該知道羞酗。然后大家按照官網(wǎng)文檔中的步驟來(lái)就行腐宋。這里放一個(gè)鏈接：
https://facebook.github.io/react-native/docs/getting-started.html
這個(gè)給大家提個(gè)醒，最好全程備梯子翻墻檀轨。
說(shuō)下Chocolatey胸竞，比較簡(jiǎn)單的方法就是cmd里面執(zhí)行語(yǔ)句，很快就行了参萄，這個(gè)是前提卫枝，沒(méi)有Chocolatey，就沒(méi)有后面的步驟讹挎，所以不要被它卡住校赤。
這里放下cmd命令：
powershell -NoProfile -ExecutionPolicy Bypass -Command "iex((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
網(wǎng)絡(luò)暢通的話(huà)幾秒鐘就安裝好了。
接下來(lái)就是Node和Python筒溃，這個(gè)按照官網(wǎng)的指令來(lái)就可以了马篮。還是那句話(huà)，網(wǎng)絡(luò)暢通的話(huà)也是很快就好了怜奖。這里可能Python慢一點(diǎn)浑测，多等一下就會(huì)好。
再下來(lái)就是準(zhǔn)備Android開(kāi)發(fā)環(huán)境烦周，什么SDK啊尽爆，IDE（Android Studio）啊都備好。SDK的話(huà)我建議大家读慎，下全漱贱，如果硬盤(pán)空間足夠，就做個(gè)全下載吧夭委。
再下來(lái)安裝React Native Cli幅狮，這一步募强，關(guān)掉cmd窗口，再開(kāi)個(gè)新的崇摄，才能使用新的環(huán)境變量擎值，也就是npm正常工作。重新打開(kāi)cmd窗口后逐抑，還是按照官網(wǎng)的指引鸠儿，安裝React Native Cli。這一步會(huì)有命令行版的進(jìn)度指示厕氨，雖然不太美觀进每，至少還算直觀。
再下來(lái)配置Android SDK環(huán)境變量命斧，這一步必須配田晚，否則再下來(lái)會(huì)報(bào)錯(cuò)。配置的方法依然按照官方文檔走国葬。
設(shè)置完環(huán)境變量之后贤徒，就可以運(yùn)行了，首先cmd進(jìn)入一個(gè)文件夾汇四，這個(gè)文件夾將作為項(xiàng)目代碼文件夾接奈，可以新建，這個(gè)就隨意了通孽。
運(yùn)行react-native init AwesomeProject后鲫趁，會(huì)出現(xiàn)install若干包的提示，這個(gè)是正常的利虫，而且僅當(dāng)新建項(xiàng)目的時(shí)候會(huì)有這個(gè)步驟，日后重新運(yùn)行就沒(méi)有了堡僻，而且不可省略糠惫，因此這里多等待一下吧。
若干分鐘后钉疫，進(jìn)入新項(xiàng)目目錄下執(zhí)行react-native run-android硼讽，代碼就運(yùn)行起來(lái)了，和在Android Studio里面按Shift+F10（默認(rèn)的Windows環(huán)境下的“運(yùn)行”快捷鍵）的效果是一樣的牲阁。這一步在首次運(yùn)行時(shí)也需要下載一堆東西固阁，日后也是無(wú)需的。
部署到手機(jī)上之后城菊，按手機(jī)的菜單鍵备燃，或adb shell input keyevent 82喚出菜單鍵效果，在Dev Settings項(xiàng)里面把PC端IP和端口設(shè)置好凌唬。具體方法參見(jiàn)：
https://facebook.github.io/react-native/docs/running-on-device-android.html
文檔里有詳細(xì)的說(shuō)明并齐，當(dāng)然，中文文檔在部署運(yùn)行上給出的向?qū)б粯淤N心。
再來(lái)說(shuō)下Mac平臺(tái)况褪。
到Mac平臺(tái)就簡(jiǎn)單多了撕贞，還是按照官網(wǎng)的指示就行，沒(méi)什么好特別強(qiáng)調(diào)的测垛。不過(guò)這里還是要給大家提個(gè)醒捏膨，如果你看的是React Native的中文官網(wǎng)，那么食侮，在安裝node之后号涯，在推薦安裝里你會(huì)發(fā)現(xiàn)推薦安裝Watchman。這個(gè)必須裝疙描，不是選裝組件诚隙，是必須的，否則電腦端JS Server會(huì)報(bào)錯(cuò)起胰，手機(jī)也會(huì)紅屏報(bào)錯(cuò)久又，切記！
