(一)前言
FaceBook早期開源發(fā)布了React Native For IOS,終于在2015年9月15日也發(fā)布了React Native for Android,雖然Android版本的項(xiàng)目發(fā)布比較遲贺辰，但是也沒有阻擋了廣大開發(fā)者的熱情。可以這樣講在2015年移動(dòng)平臺(tái)市場(chǎng)上有兩個(gè)方向技術(shù)研究比較火展箱，第一種為阿里退疫，百度验游，騰訊苫幢，攜程职员，360等一線互聯(lián)網(wǎng)公司的插件化，熱修改等技術(shù)赊琳，第二種就是廣大開發(fā)者一直在討論的React Native技術(shù)街夭。前幾天同我在美國的童鞋了解到，在國外現(xiàn)在很多創(chuàng)業(yè)型互聯(lián)網(wǎng)公司都在使用React Native技術(shù)躏筏，由此可以看出該項(xiàng)技術(shù)的前景還是不錯(cuò)的板丽。我在這邊我自己就大膽預(yù)測(cè)一下吧(呵呵,勿噴哦~)：2016年將是React Native大力發(fā)展的一年。所以對(duì)于我自己來而言趁尼，2016年的主要技術(shù)方向,React Native是占了主角了埃碱。
(二)React Native介紹
React Native For Android是偉大的互聯(lián)網(wǎng)公司Facebook與2015年9月15日發(fā)布的，該可以讓我們廣大開發(fā)者使用JavaScript和React開發(fā)我們的應(yīng)用酥泞，該提倡組件化開發(fā)砚殿，也就是說React Native給我們提供一個(gè)個(gè)封裝好的組件讓開發(fā)者來進(jìn)行使用，甚至我們可以相關(guān)嵌套形成新的組件芝囤。使用React Native我們可以維護(hù)多種平臺(tái)(Web,Android和IOS)的同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用∷蒲祝現(xiàn)階段Web APP的的體驗(yàn)還是無法達(dá)到Native APP的體驗(yàn)，所以這邊f(xié)ackbook更加強(qiáng)調(diào)的是learn once,write everywhere凡人，應(yīng)用前端我們使用js和React來開發(fā)不同平臺(tái)的UI名党，下層核心模塊編寫復(fù)用的業(yè)務(wù)邏輯代碼，提供應(yīng)用開發(fā)效率挠轴。
React Native項(xiàng)目github地址:GitHub - facebook/react-native: A framework for building native apps with React.?
React Native項(xiàng)目官網(wǎng)文檔:Getting Started – React Native?
(三)React Native 配置安裝
特別聲明:facebook官網(wǎng)說當(dāng)前react native歡迎是需要OS X,不過我也看到了有人通過windows系統(tǒng)配置該環(huán)境哈~大家有興趣可以百度搜索一下传睹。
3.1.Homebrew安裝
Homebrew是OS X不可獲取的套件管理器，我們可以通過它獲取并且安裝很多組件,安裝方式如下: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 然后通過命令行執(zhí)行brew -v進(jìn)行檢查brew是否已經(jīng)安裝成功岸晦。整體截圖如下:
3.2.Node.js安裝,我們需要安裝Node.js 4.0或者更高版本,這邊推薦采用Node管理器nvm來進(jìn)行安裝,nvm項(xiàng)目地址:GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions?
第一部分:安裝nvm欧啤，查看項(xiàng)目官網(wǎng)官方推送curl或者wget方式安裝或者更新nvm:
第一種:curl方式:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
第二種:wget方式:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
不過在使用這兩種方式之前，我們可以采用brew install curl或者brew install wget來確保已經(jīng)安裝curl或者wget启上。我這邊采用了第一種方式安裝邢隧，具體安裝截圖如下:
這樣我們已經(jīng)安裝了nvm，但是最好我們配置一下環(huán)境變量到.bash_profile文件中冈在，具體配置如下:
最終我們通過命令行執(zhí)行nvm? --version檢查一下nvm是否已經(jīng)安裝成功倒慧。
第二部分:安裝Node.js，根據(jù)官網(wǎng)文檔我們直接命令行執(zhí)行如下命令即可完成完成:
nvm install node && nvm alias default node
該會(huì)進(jìn)行安裝Node.js最新版本包券，并且會(huì)給我們打個(gè)別名纫谅，方便使用。通過nvm我們可以安裝多個(gè)版本的Node.js溅固，并且可以非常輕松的選擇不同的版本進(jìn)行切換使用付秕。
【注意】如果現(xiàn)在采用是Node5.0版本的版本，官網(wǎng)是推薦安裝npm 2侍郭，該版本比npm 3速度更加快询吴。在安裝完Node之后掠河，命令行運(yùn)行npm install? -g npm@2安裝即可。
第三部分:安裝watchmam猛计，該用于監(jiān)控bug文件唠摹，并且可以觸發(fā)指定的操作，安裝方式如下:
brew install watchman
安裝截圖如下:
第四部分:安裝flow,flow是一個(gè) JavaScript 的靜態(tài)類型檢查器有滑，建議安裝它跃闹，以方便找出代碼中可能存在的類型錯(cuò)誤，官網(wǎng):Flow?
安裝截圖如下:
3.3.原生開發(fā)環(huán)境安裝:
針對(duì)iOS開發(fā)毛好，我們只需要安裝Xcode 7.0或者7.0以后版本望艺，該可以通過App Store進(jìn)行下載安裝
針對(duì)Android開發(fā)，Android環(huán)境配置網(wǎng)上非常多了肌访，我相應(yīng)看這篇文章的朋友電腦上面基本都有Android開發(fā)環(huán)境的了~針對(duì)安裝詳細(xì)<(點(diǎn)擊進(jìn)入?yún)⒖嘉恼?>
3.4.React Native安裝
現(xiàn)在就是最后一步找默，也是最激動(dòng)人心的時(shí)刻到了，我們使用命令行運(yùn)行如下命令安裝React Native:
npm install -g react-native-cli
安裝截圖如下:
經(jīng)過以上的四個(gè)大步驟我們基本完成React Native從基本環(huán)境的搭建工作吼驶，下面我們來進(jìn)行一個(gè)實(shí)例演示React Native項(xiàng)目的效果惩激。
(四)React Native第一個(gè)應(yīng)用(AwesomeProject)
經(jīng)過以上的四個(gè)大步驟我們基本完成React Native從基本環(huán)境的搭建工作，下面我們來進(jìn)行一個(gè)實(shí)例演示React Native項(xiàng)目的效果蟹演。React Native第一個(gè)AwesomeProject风钻，就不是HelloWorld啦。
首先執(zhí)行如下命令,生成一個(gè)工程:
react-native init AwesomeProject
運(yùn)行截圖如下:
目錄結(jié)構(gòu)如下:
我們仔細(xì)看上面的目錄酒请，會(huì)發(fā)現(xiàn)該該生成android和ios兩個(gè)平臺(tái)的原生項(xiàng)目骡技，大家有興趣可以打開android和ios目錄看一下，里邊就是一個(gè)Android? Studio和Xcode創(chuàng)建的項(xiàng)目羞反。其中index.android.js和index.ios.js文件為Android和IOS的空殼應(yīng)用文件布朦。另外還有一個(gè)node_modules文件夾，該為Node.js存放和管理npm包得昼窗，也包含React Native框架文件是趴。
查看項(xiàng)目部分代碼:index.android.js如下:
4.1.運(yùn)行iOS 應(yīng)用:
①.命令行執(zhí)行cd AwesomeProject,路徑切換到項(xiàng)目主目錄
②.點(diǎn)擊ios/AwesomeProkect.xcodeproj進(jìn)行運(yùn)行Xocde
③.使用編輯器進(jìn)行打開index.ios.js進(jìn)行相關(guān)修改，然后運(yùn)行應(yīng)用即可澄惊。
4.2.運(yùn)行Android應(yīng)用:
①.命令行執(zhí)行cd AwesomeProject,路徑切換到項(xiàng)目主目錄
②.命令行執(zhí)行react-native run-android進(jìn)行加載運(yùn)行android 應(yīng)用唆途。
③.同樣可以使用編輯器進(jìn)行打開和修改index.android.js文件，接著通過菜單按鈕選擇Reload JS來進(jìn)行刷新修改
運(yùn)行截圖如下:
這些步驟掸驱，命令執(zhí)行完之后窘哈，那么我們第一個(gè)應(yīng)用也完美運(yùn)行啦，具體看如下效果亭敢！
(五)已存在React Native項(xiàng)目添加Android版本
因?yàn)镽eact Native的Android版本的發(fā)布要晚于iOS版本，所以有很多接觸React Native比較早的應(yīng)用可能只有iOS版本图筹，我們可以進(jìn)行如下的操作帅刀，給添加Android版本:
①.修改package.json文件來更新react-native到最新版本
②.運(yùn)行npm install命令
③.最后執(zhí)行以下react-native android命令即可
(六)最后總結(jié)
今天我們從初始開始让腹，安裝各種工具以及命令，完成了React Native的基礎(chǔ)環(huán)境的搭建扣溺，并且成功運(yùn)行第一個(gè)React Native for Android的應(yīng)用骇窍。下一篇我們對(duì)推薦IDE(Atom)以及相關(guān)插件的安裝配置講解。敬請(qǐng)期待~
