盡管在移動開發中,原生APP的開發成本很高,但現階段基于原生開發仍然是必須的,因為Web的用戶體驗仍無法超越Native,主要體現在:
(1)Native的原生控件有更好的體驗
(2)Native有更好的手勢識別
(3)Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼,文本渲染仍無法多線程渲染,這影響了Web的流暢性
開篇
React Native于F8大會開源,在短短不到一年的時間里,它成為手機端必不可少的開發模式之一.它充分利用了Facebook現有的業務輪子,其核心設計理念:既擁有Native的用戶體驗,又保留React的開發效率.
目前,React Native基本完成了對多端的支持,實現了真正意義上的面向配置開發:開發者可以靈活的使用HTML和CSS布局,使用React語法構建組件,實現:H5,Android,iOS多端代碼的復用.
此外,使用流暢度和原生的保持在同一層次,這不是我們夢寐以求的開發模式嗎?讓我們從無到有開啟新的學習篇章吧!
什么是React Native?
(一) 時下兩大移動互聯網主流技術
BAT等一線互聯網公司的插件化,熱修改等技術
React Native技術(2016年,隨著Android版本的穩定,更加火爆)
(二)React Native介紹
Facebook于2015年9月15日發布React Native
廣大開發者可以使用JavaScript和React開發跨平臺移動應用
React Native提倡組件化開發:即提供一個個封裝好的組件,組件相互嵌套,形成新的組件
(三) React Native的優勢
3.1 跨平臺開發
運用React Native,我們可以使用同一份業務邏輯核心代碼來創建原生應用運行在Web端,Android端和iOS端;
React Native的優秀之處在于其吸取了各家跨平臺解決方案的優點然后融于一體。
(1)通過JavaScript驅動原生代碼，實現非常接近原生應用的體驗；
(2)統一的開發語言和框架打破不同平臺語言和機制不通用必須分別開發的障礙；
(3)更具革命性的是React Native基于React的設計思想，通過虛擬DOM、單向數據流，為我們帶來了更加簡單高效的開發體驗。
3.2 追求極致的用戶體驗:實時熱部署
3.3Learn once, write anywhere(最具魅力)
React Native不強求一份原生代碼支持多個平臺,所以不提"write once,run anywhere”(Java),提出了”Learn once, write anywhere“.
只需要學習React Native，我們就能夠編寫針對不同平臺的應用，并且使用React Native框架開發相較于原生代碼開發應用，更簡單更高效。
通過React Native框架我們能夠實現應用任意模塊的更新，而不需要用戶通過各種渠道下載安裝包重新安裝。修復線上bug也會變的非常及時。并且對應用的更新可以在靜默的狀態下完成，省去讓用戶等待的時間。
(四) React Native開發注意事項
4.1 目前React Native在iOS上僅支持ios7以上,Android僅支持Android4.1以上版本;
github地址:https://github.com/facebook/react-native
官方文檔:http://facebook.github.io/react-native/docs/getting-started.html
4.2 由于React Native的版本更新速度很快,如果沒有深厚的JavaScript基礎,建議選擇:
a. 功能適中,交互一般,不需要特別多的系統原生支持;
b. 對于部分復雜的應用,可以考慮原生+React Native混合開發
如果說ReactNative有什么劣勢的話，首先就是學習成本比較高。
學習成本不僅僅包括需要學習React Native框架的使用，還包括對于不同平臺原生應用開發能力的掌握。
由于目前的React Native框架還無法完全脫離原生代碼獨立完成大型應用的開發，所以要求開發人員即熟悉React Native框架的運用又有原生應用開發的經驗。
React Native目前存在的問題：雖然Facebook官方宣傳React Native具有原生應用相差無幾的用戶體驗。但是實際開發中發現在一些對性能要求較高的情況下，React Native構建的UI在滑動過程中有明顯的卡頓，遠遠不能達到60FPS的要求。
其次React Native框架目前仍然存在一些性能問題，比如ListView內存泄露的問題。而且React Native框架開發的應用通常要比原生應用占用更多的內存和CPU，這也意味著通過React Native構建的應用更耗電。
最后React Native作為一個剛剛開源的框架，雖然在github的熱度很高，但是可用的UI組件不夠豐富。第三方組件良莠不齊，很多組件都存在不同平臺無法適配的問題。這也直接導致，盡管React Native是一個能夠用于跨平臺開發的框架，但是為保證一致的用戶體驗在一些情況下不得不針對不同平臺編寫不同的代碼。
一. 環境需求
1.1安裝Homebrew
Homebrew是Mac OSX的包管理器，我們需要通過Homebrew安裝開發React Native的相關軟件包。
安裝方式:
ruby -e"$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
注意這里會出現一個問題:
會出現一個這樣的語句Press?RETURN?to?continue?or?any?other?key?to?abort
點擊enter繼續就好
命令行執行brew -v進行檢查brew是否已經安裝成功
1.2? 安裝npm 和 Node.js
Node.js最好安裝4.0及其以上更高版本,node安裝成功后,npm自動也就有了,直接下載安裝Node.js, 網址:https://nodejs.org/en/download/
或者
brew install node
此方式需要將Xcode更新到8.0
1.3? 安裝WatchMan
watchman是Facebook用于監視JavaScript文件改動的開源項目,該插件用于監控bug變化和文件變化,并且可以觸發指定的操作
安裝方式:
brew install watchman
驗證是否安裝成功
1.4? 安裝flow
flow是Facebook開源的一個JavaScript靜態類型檢查器，建議安裝它,以方便找出JavaScript程序中可能存在的類型錯誤
安裝方式:
brew install flow
驗證是否安裝成功
(注意:如果提示command not found,請加上sudo獲得最高權限)
二. React Native的安裝
2.1安裝react-native-cli。react-native-cli是React Native的命令行工具，安裝react-native-cli后我們就能夠通過react-native相關命令管理ReactNative工程。
安裝方式:
npm install -g react-native-cli
驗證是否安裝成功
三. iOS開發環境需求
Xcode7及其以上更高版本,如果你的電腦沒有安裝Xcode，請到AppStore下載最新版本。切記不要從任何第三方渠道下載！
注意
npm，是Node.js的模塊依賴管理工具。React Native源代碼以及開發React Native應用用到的第三方組件都可以通過npm進行下載安裝。
四. Android開發環境需求
安裝最新版的JDK:
下載安裝地址:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安裝Android studio:
下載安裝地址:
https://sites.google.com/a/android.com/tools/recent
先安裝Android studio,然后打開終端, 輸入vim ~/.bashrc,按enter后,
輸入exportANDROID_HOME=~/Library/Android/sdk,然后按esc后,輸入:wq,退出vim編輯器.
這種方式,可以省略以下4.1-4.3步驟,只需要從4.4開始執行即可,所以建議安裝Android studio
4.1? 安裝Android SDK
安裝方式:
brew install android-sdk
4.2? 定義ANDROID_HOME環境變量
確保ANDROID_HOME環境變量指向你已經安裝的Android SDK目錄:
前往電腦的~/.bashrc,~/.bash_profile或者你終端所用的其它配置文件中增加以下內容:
4.3? 設置SDK
打開Android SDK Manager(Mac用戶在終端下輸入android)
選中以下項目:
Android SDK Build-tools version 23.0.1 ?(這個版本必須嚴格匹配23.0.1)
Android 6.0 (API 23)
Local Maven repository for Support Libraries (之前叫做AndroidSupportRepository)
點擊”Install Packages”:
4.4? 安裝Genymotion
Genymotion是一個第三方模擬器,它比Google官方的模擬器更易設置且性能更好.但是它只針對個人用戶免費.
(1) 下載并安裝Genymotion
(2) 打開Genymotion,如果你尚未安裝VirtualBox,它有可能會提示你安裝
VirtualBox下載安裝地址:
(3) 打開Genymotion,創建一個模擬器并啟動(需要在Genymotion的官網注冊一個賬號才可以打開)
(4) 按下command+M可以打開開發者菜單(在安裝并啟動了React Native應用之后)
五. React Native的第一個應用
5.1? 執行命令,生成一個工程
react-native init 項目名稱
選擇一個目錄位置，執行上述命令，終端出現如下信息說明工程已經創建完畢。
注意:
因為要從npm下載React Native的源代碼，可能需要等待一會。如果長時間沒有反應，建議翻墻。也可以將npm替換為國內鏡像：
npm config set registry https://registry.npm.taobao.org?--global
npm config set disturl https://npm.taobao.org/dist?--global
5.2? AseeMyGoProduct就是我們創建的工程的名稱。
5.2.1 到AseeMyGoProduct工程同名的目錄下，進入ios目錄，用Xcode打開AseeMyGoProduct工程，?+R運行。這時可以看到終端啟動并且輸出服務器啟動的相關信息。
等待模擬器啟動，可以看到一個Welcome to React Native界面，說明我們已經成功創建第一個ReactNative工程。
5.2.2 到AseeMyGoProduct工程同名的目錄下，進入android目錄，用Android studio打開android目錄,等待時間會很長。
5.3? 目錄結構截圖
目錄結構分析:
(a) 默認生成android和ios兩個平臺的原生項目
(b) 其中,index.android.js和index.ios.js文件為Android和iOS的空殼應用文件
(c) 此外,node_modules文件夾,是為Node.js存放和管理npm包資源,也包含React Native框架文件
查看index.ios.js中的代碼
六. 運行工程文件
不管是 iOS 還是 Android,在開發調試階段,都需要在 Mac上 啟動一個 HTTP 服務,稱為Debug Server,默認運行在8081端口, APP 通過Debug Server加載 js
6.1 打開Xcode,運行你的第一個React Native創建的iOS應用
6.2? 把React Native創建的應用跑在Android上
(a) 命令行執行cd?AseeMyGoProduct,路徑切換到項目主目錄
(b)命令行執行react-native run-android,加載運行android應用
(c) 使用編輯器打開和修改index.android.js文件,接著通過菜單按鈕選擇Reload JS進行刷新修改
七. 管理React Native庫的版本
在開發中,會經常的去控制React Native的版本庫,得以適配各種條件下的開發,那該如何查看,控制React Native的版本呢?
7.1 查看本地的React Native庫的版本
命令行輸入react-native --version
命令行效果
7.2 更新本地的React Native的版本
命令行輸入?npm update -g react-native-cli
7.3 查看react-native的npm包最新版本
NPM的全稱是Node Package Manager, 是一個NodeJS包管理和分發工具,已經成為了非官方的發布Node模塊(包)的標準
npm包地址:https://www.npmjs.com/package/react-native
命令行查詢?npm info react-native
查詢效果
在項目中查看
7.4 升級或者降級npm包的版本
升級到當前最新?npm install --save react-native@0.36
降級到以前版本?npm install --save react-native@0.18
7.5 更新項目templates文件(可選)
新的npm包會包含更新在運行react-native init命令生成的一些動態文件,例如init創建項目的時候會生成iOS和Android的子項目,我們可以通過以下的命令進行獲取最新的代碼
命令行查詢react-native upgrade
八. WebStorm設置React Native代碼提示
8.1 從github上下載xml插件
git clone?https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
8.2 安裝
將ReactNative.xml復制到 ~/Library/Preferences/WebStorm2016.1/templates,然后重啟WebStorm.
