ReactNative簡(jiǎn)介
ReactNative是移動(dòng)端目前最熱的框架之一, 著力于提高多平臺(tái)開(kāi)發(fā)的開(kāi)發(fā)效率 —— 僅需學(xué)習(xí)一次，編寫(xiě)任何平臺(tái)。
(Learn once, write anywhere)。Facebook 已經(jīng)在多項(xiàng)產(chǎn)品中使用了React Native，
并且將持續(xù)地投入建設(shè)React Native。React Native 可以通過(guò)更新遠(yuǎn)端JS，直接更新app, 用 JavaScript 調(diào)起 native 組件
將增強(qiáng)與高性能組件交給 native 來(lái)處理 . 相比其他 hybrid (介于webApp和nativeApp之間的混合模式) 框架而言,
ReactNative并非通過(guò) webview 來(lái)調(diào)用原生組件, 而是直接調(diào)用操作系統(tǒng)自帶的 javascriptCore, 所以更高效。
React Native 的優(yōu)點(diǎn)很明顯。官網(wǎng)的醒目位置有簡(jiǎn)單介紹，開(kāi)發(fā)者們也在各種場(chǎng)合做了相關(guān)說(shuō)明，總結(jié)如下：
- 跨平臺(tái)開(kāi)發(fā)。同一段 Javascript 代碼可以被用于 iOS 和 Android 兩個(gè)平臺(tái)。
相比于以前 iOS 和 Android App 各維護(hù)一套邏輯大同小異的代碼，React Native 的開(kāi)發(fā)、測(cè)試和維護(hù)成本要低很多。
- 快速編譯。比起 Xcode 中漫長(zhǎng)的編譯，React Native 采用了熱加載（Hot Reload）的即時(shí)編譯機(jī)制，
使得 App UI 的開(kāi)發(fā)體驗(yàn)大幅改善，幾乎到了和網(wǎng)頁(yè)開(kāi)發(fā)一樣隨改隨變的效果。
- 快速發(fā)布。通過(guò) JSBundle，React Native 可以即時(shí)更新 App。相比原來(lái)冗長(zhǎng)的審核和上傳過(guò)程，
發(fā)布和測(cè)試新功能的效率大幅提高。
- 渲染和布局更加高效。React Native 可以直接套用網(wǎng)頁(yè)開(kāi)發(fā)的 CSS 和 flex 機(jī)制，
擺脫了 autolayout 和 frame 布局中繁瑣的數(shù)學(xué)計(jì)算，更加直接簡(jiǎn)便。
- 簡(jiǎn)單易學(xué)。相比于 iOS 和 Android 的一整套復(fù)雜的知識(shí)體系，React Native 從本質(zhì)上來(lái)講就是狀態(tài)機(jī)，
對(duì)于開(kāi)發(fā)者來(lái)講理解不難，且實(shí)際操作可謂入門容易、上手輕松。如果是前端開(kāi)發(fā)者，
那么對(duì)于 Javascript 本來(lái)就有相應(yīng)了解，用 React Native 開(kāi)發(fā)手機(jī)應(yīng)用更是水到渠成。
當(dāng)然，看上去很完美的 React Native 在技術(shù)上也有諸多風(fēng)險(xiǎn)，比如：
- 第三方依賴。React Native 嚴(yán)重依賴于 Facebook 的維護(hù)。
蘋果在 iOS 上每次技術(shù)的更新、政策的改變都會(huì)讓原來(lái)使用了 React Native 代碼庫(kù)受到影響，
等待 Facebook 和社區(qū)的修復(fù)會(huì)妨礙 App 的更新和用戶體驗(yàn)。前段時(shí)間，
百度和開(kāi)發(fā)者們棄用React Native 而迫使的 Facebook 修改開(kāi)發(fā)者權(quán)限（License）事件，
證明了開(kāi)發(fā)依賴于第三方的風(fēng)險(xiǎn)確實(shí)存在。
- 邏輯上的額外開(kāi)銷。直到今天， React Native 依然只是0.49版本，僅僅支持簡(jiǎn)單的 UI 制作，
其不成熟的 API 連復(fù)雜的動(dòng)畫(huà)都難以實(shí)現(xiàn)，更別提 iOS 的底層優(yōu)化和兼容操作。同時(shí)因?yàn)椴僮飨到y(tǒng)和設(shè)備的不同，
React Native 得分別進(jìn)行針對(duì)性處理，這對(duì)代碼庫(kù)的維護(hù)又是一個(gè)挑戰(zhàn)。
- 聯(lián)調(diào)的困難。對(duì)于原生的 iOS 和 Android App 引入 React Native，會(huì)增加整個(gè)代碼庫(kù)的復(fù)雜度，
在深入底層原生代碼進(jìn)行 debug 時(shí)也是困難重重，可以說(shuō)是在開(kāi)發(fā)和維護(hù)上的成本都有所增加。
硅谷對(duì)于 React Native 也普遍持保守態(tài)度，采用 React Native的科技巨頭也只有
Facebook，Amazon，Uber，Airbnb 四家，而且都是局部小功能、小App采用。
個(gè)人認(rèn)為，只有在快速開(kāi)發(fā)、節(jié)約成本的考慮之下，React Native 才能發(fā)揮出巨大的優(yōu)勢(shì)。
原因很簡(jiǎn)單,可以不再忍受新版本的漫長(zhǎng)的審核期,可以從服務(wù)器動(dòng)態(tài)更新JavaScript代碼來(lái)實(shí)現(xiàn)應(yīng)用的更新。
對(duì)于 iOS 開(kāi)發(fā)者，React Native 只可作為適當(dāng)補(bǔ)充。
搭建React Native環(huán)境
1.安裝Node.js
- 點(diǎn)擊 nodejs官網(wǎng)
下載最新版的Node.js后，一步一步安裝即可。注意下載后的文件為 pkg 文件而不是 dmg。
2.安裝Watchman
Watchman 是 facebook 的一個(gè)開(kāi)源項(xiàng)目，它開(kāi)源用來(lái)監(jiān)視文件并且記錄文件的改動(dòng)情況，
當(dāng)文件變更它可以觸發(fā)一些操作,例如執(zhí)行一些命令等等。
brew install watchman
3 安裝flow
flow用于類型檢查
brew install flow
4.安裝React Native
如果安裝時(shí)間比較長(zhǎng)的話,可以使用淘寶鏡像.具體的可以自行百度,
我安裝的時(shí)候沒(méi)有使用VPN,自身的網(wǎng)絡(luò)也不是光纖,幾分鐘就OK了。
sudo npm install -g react-native-cli
5.使用NVM管理Node.js版本
如果需要經(jīng)常切換Node.js版本,建議使用NVM管理Node.js版本.
直接使用git clone命令,隨后執(zhí)行下面兩個(gè)命令即可臨時(shí)使用nvm命令。
git clone https://github.com/creationix/nvm.git
cd nvm
source nvm.sh
創(chuàng)建項(xiàng)目
搭建好RN環(huán)境以后，我們來(lái)創(chuàng)建一個(gè)HelloWorld項(xiàng)目。
1. 首先在桌面上創(chuàng)建一個(gè)名為 rn_demo 的文件夾
2. 在終端進(jìn)入創(chuàng)建的文件夾 (cd)
3. 創(chuàng)建項(xiàng)目
react-native init HelloWord
創(chuàng)建完成后會(huì)出現(xiàn)紅色的文件，AppDelegate 里面可能也會(huì)報(bào)錯(cuò)，但是沒(méi)關(guān)系，運(yùn)行下就可以了，并且運(yùn)行后會(huì)開(kāi)啟一個(gè)終端,不用管,也不要關(guān)閉。
不出意外,你可以看到下面的畫(huà)面：
4.修改App.js文件：
使用SublimeText打開(kāi)App.js文件, 隨意改一下fontSize或者margin之類的,然后 cmd+s 保存修改，
然后選中你的模擬器,CMD + R即可直接刷新.這就說(shuō)明,我們修改JavaScript文件生效了.
