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