前言
Android放下很久了哗戈，前段時(shí)間一直扎根于前端三大件（HTML征冷、CSS、JavaScript）的學(xué)習(xí)，目的呢是想為之后的學(xué)習(xí)React Native學(xué)習(xí)做好準(zhǔn)備席赂。趁著離考試還有一段時(shí)間拗小，也是重新走上Android開(kāi)發(fā)的道路莹弊。
現(xiàn)在確實(shí)是移動(dòng)設(shè)備占優(yōu)毕匀，現(xiàn)在智能手機(jī)能夠完成網(wǎng)頁(yè)端很多的工作。大有一統(tǒng)江山的趨勢(shì)年缎。移動(dòng)開(kāi)發(fā)在未來(lái)的很長(zhǎng)時(shí)間里面都是熱門悔捶。
工欲善其事必先利其器，本文主要是結(jié)合自己的相關(guān)經(jīng)驗(yàn)搭建開(kāi)發(fā)環(huán)境单芜，來(lái)開(kāi)始關(guān)于React Native的第一篇博文蜕该。縱觀網(wǎng)上的各種教程洲鸠，還有官方的一些教程吧堂淡，寫(xiě)的是比較簡(jiǎn)略的，所以本文的定位是寫(xiě)一點(diǎn)比較詳細(xì)的環(huán)境安裝教程扒腕。
關(guān)于react native
還是老規(guī)矩绢淀，介紹下這個(gè)東東吧。
React Native 是一個(gè) JavaScript 的框架瘾腰，用來(lái)撰寫(xiě)實(shí)時(shí)的更啄、可原生呈現(xiàn) iOS 和 Android 的應(yīng)用。其是基于 React的居灯，而 React 是 Facebook 的用于構(gòu)建用戶界面的 JavaScript 庫(kù)，但是這里不是給瀏覽器解釋的内狗，而是為移動(dòng)平臺(tái)怪嫌。換句話說(shuō)：如果你是一名 web 開(kāi)發(fā)者，你可以使用熟悉的框架和單一的 JavaScript 代碼庫(kù)柳沙，即 React Native來(lái)撰寫(xiě)清晰的岩灭、高效的移動(dòng)應(yīng)用。
相比較于 iOS 和 Android 原生的開(kāi)發(fā)赂鲤，React Native 提供更好的開(kāi)發(fā)者體驗(yàn)噪径。因?yàn)槟愕某绦虼蠖鄶?shù)都是 JavaScript，你可以從 web 開(kāi)發(fā)中汲取大量的經(jīng)驗(yàn)数初，比如能夠立即“刷新”你的應(yīng)用來(lái)查看你代碼的修改找爱。相比于在傳統(tǒng)的應(yīng)用開(kāi)發(fā)中花很長(zhǎng)的時(shí)間去等待構(gòu)建的過(guò)程，會(huì)讓人感覺(jué)這簡(jiǎn)直是天賜之物泡孩。
另外车摄，React Native 還為開(kāi)發(fā)者提供了智能的錯(cuò)誤報(bào)告和標(biāo)準(zhǔn)的 JavaSript 調(diào)試工具，這些讓移動(dòng)開(kāi)發(fā)更加的順手。
確實(shí)現(xiàn)在的開(kāi)發(fā)吮播，RN在后面的很長(zhǎng)時(shí)間是主流变屁。畢竟原生開(kāi)發(fā)存在著諸多問(wèn)題，最大的問(wèn)題是在用戶體驗(yàn)上意狠。廢話不多說(shuō)粟关，進(jìn)入正題。
安裝
安裝過(guò)程可以參考React Native中文網(wǎng)
那你以為這樣就完了嗎环戈？沒(méi)有闷板。
官方文檔上面說(shuō)了，必須安裝的東西谷市，其實(shí)有些東西是沒(méi)有必要的蛔垢，比如Chocolatey這個(gè)包管理器，下載速度及其慢迫悠，完了還不支持?jǐn)帱c(diǎn)續(xù)傳鹏漆，網(wǎng)絡(luò)一有波動(dòng)就GG。
所以遇到按照官方的步驟配置的遇到錯(cuò)誤的创泄，到我這里來(lái)就對(duì)了艺玲。
Node.js以及Python安裝
這里需要用到的兩個(gè)軟件分別是Python2和Node.js（其中Python必須安裝2.x.x版本，Node.js隨便安裝都無(wú)所謂）鞠抑。
我們采用安裝包的方式安裝這兩個(gè)軟件饭聚，下載地址為：
- Python：Python2.7.14
- Node.js:Node.js 8.9.4LTS
安裝過(guò)程一路默認(rèn)就行，但是要注意搁拙，需要把Python的根目錄添加到環(huán)境變量秒梳。C:\Python27
其次，Node.js也是需要將其根目錄配置到環(huán)境變量的箕速。
具體流程就不詳細(xì)介紹了酪碘，如果有問(wèn)題請(qǐng)?jiān)兌饶铩?/p>
Yarn、React Native安裝
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
PS：這里不設(shè)置也是可以的窑业，親測(cè)沒(méi)有什么差別钦幔。
Android Studio安裝
React Native是支持3.x版本的。所以博主是用的3.1的版本常柄，這個(gè)版本的Android虛擬機(jī)做了些優(yōu)化节槐，無(wú)論是啟動(dòng)速度還是性能各個(gè)方面都很優(yōu)秀搀庶。另外3.x出來(lái)快大半年了，還停留在2.3版本的朋友可以考慮給手中的AS升級(jí)了铜异。
關(guān)于Android Studio的安裝我就不詳細(xì)介紹了哥倔，官方教程寫(xiě)的還是很詳細(xì)的，另外官方教程的安裝步驟2.3和3.1的沒(méi)有差別揍庄。
PS：這里再說(shuō)一下咆蒿，Java JDK不支持9.0版本的，我之前用的就是9.0版本蚂子，發(fā)現(xiàn)不兼容沃测，果斷換回了8.0.
這里直接簡(jiǎn)述下安裝過(guò)程，相信AS這種級(jí)別的軟件安裝不是很難吧食茎。
- 安裝軟件的步驟是一路Next就行蒂破，沒(méi)有坑
- 安裝完成后打開(kāi)AS，然后這里會(huì)下載一些組件别渔，請(qǐng)保持網(wǎng)絡(luò)連接附迷。
- 確保 Android SDK和Android Device Emulator選中
- 打開(kāi)軟件后選擇custom選項(xiàng)，接下來(lái)會(huì)叫你選擇主題什么的哎媚，你開(kāi)心就好
- 這里SDK Components Setup 里面的東西全部選中喇伯，當(dāng)然你要更改SDK的路徑也是可以的
- 安裝完成后，在Android Studio的歡迎界面中選擇Configure | SDK Manager拨与。
- 在SDK Platforms窗口中稻据，選擇Show Package Details，然后在Android 6.0 (Marshmallow)中勾選Google APIs买喧、Android SDK Platform 23捻悯、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image淤毛。
- 在SDK Tools窗口中秋度，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個(gè)版本钱床。當(dāng)然如果其他插件需要其他版本，你可以同時(shí)安裝其他多個(gè)版本）埠居。然后還要勾選最底部的Android Support Repository.
- 將SDK的目錄加到環(huán)境變量查牌，單獨(dú)配置Android SDK的tools和platform-tools目錄添加到PATH變量中。
Git
這個(gè)安不安裝在現(xiàn)階段是無(wú)所謂的滥壕，但是作為一個(gè)程序員纸颜，不用Git感覺(jué)就像村里沒(méi)通電一樣。
配置Android Device Emulator
用過(guò)AS的可以跨過(guò)這一步绎橘。
打開(kāi)Android virture Devices Manager胁孙，然后新建就行了唠倦。
[圖片上傳失敗...(image-1acf26-1516176914591)]
[圖片上傳失敗...(image-daf42b-1516176914591)]
[圖片上傳失敗...(image-956099-1516176914591)]
OK，到現(xiàn)在基本上環(huán)境是安裝好了涮较。接下來(lái)弄一個(gè)小小的demo測(cè)試下稠鼻。
測(cè)試
在你合適的位置新建一個(gè)文件夾用來(lái)放置RN的文件。 在此處發(fā)開(kāi)PowerShell（Shift+鼠標(biāo)右鍵狂票，選擇PowerShell）候齿。輸入命令：
react-native init 你的項(xiàng)目名
[圖片上傳失敗...(image-944347-1516176914591)]
PS：這個(gè)下載過(guò)程有點(diǎn)長(zhǎng)，我用的最短時(shí)間是0.25分鐘闺属，最長(zhǎng)5分鐘慌盯。
接下來(lái)在cd進(jìn)入你的項(xiàng)目，輸入以下命令：（在此之前掂器，需要打開(kāi)模擬器）
react-native run-android
此時(shí)會(huì)彈出Node的命令行界面：
[圖片上傳失敗...(image-466429-1516176914591)]
稍等一會(huì)就會(huì)出現(xiàn)以下界面：
[圖片上傳失敗...(image-10aae9-1516176914591)]
代表安裝成功亚皂。
總結(jié)
只是簡(jiǎn)單的簡(jiǎn)述了下我的配置RN的過(guò)程，路漫漫其修遠(yuǎn)兮国瓮。后面我會(huì)繼續(xù)學(xué)習(xí)RN灭必，同時(shí)還需要準(zhǔn)備下算法學(xué)習(xí)備戰(zhàn)藍(lán)橋杯個(gè)人賽。記錄下我的安裝步驟巍膘，在安裝的過(guò)程中也是需要耐心的厂财，官方教程也不是萬(wàn)能寶典，還是要辯證的來(lái)看吧峡懈，使用包管理器確實(shí)下載很不方便璃饱，而且出了問(wèn)題也不知道出在哪里，還是安裝包直接點(diǎn)肪康。如果在安裝過(guò)程中有不懂的地方荚恶，歡迎留言評(píng)論。
原文地址：點(diǎn)我
