# # 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50456967](http://blog.csdn.net/developer_jiangqq/article/details/50456967) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言??? ? ? ? ? ? ?**【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org)** ? ? ? ? ?FaceBook早期開源發布了React Native For IOS,終于在2015年9月15日也發布了ReactNative for Android,雖然Android版本的項目發布比較遲，但是也沒有阻擋了廣大開發者的熱情。可以這樣講在2015年移動平臺市場上有兩個方向技術研究比較火，第一種為阿里，百度，騰訊，攜程，360等一線互聯網公司的插件化，熱修改等技術，第二種就是廣大開發者一直在討論的ReactNative技術。前幾天同我在美國的童鞋了解到，在國外現在很多創業型互聯網公司都在使用React Native技術，由此可以看出該項技術的前景還是不錯的。我在這邊我自己就大膽預測一下吧(呵呵,勿噴哦~)：2016年將是React Native大力發展的一年。所以對于我自己來而言，2016年的主要技術方向,ReactNative是占了主角了。在接下來的很長一段時間內，我的博客會持續更新ReactNative的應用開發教程，歡迎大家關注以及相關交流！ ???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! # (二)React Native介紹??? ???????? React Native? For Android是偉大的互聯網公司Facebook與2015年9月15日發布的，該可以讓我們廣大開發者使用JavaScript和React開發我們的應用，該提倡組件化開發，也就是說React Native給我們提供一個個封裝好的組件讓開發者來進行使用，甚至我們可以相關嵌套形成新的組件。使用React Native我們可以維護多種平臺(Web,Android和IOS)的同一份業務邏輯核心代碼來創建原生應用。現階段Web APP的的體驗還是無法達到Native APP的體驗，所以這邊fackbook更加強調的是learn once,write everywhere，應用前端我們使用js和React來開發不同平臺的UI，下層核心模塊編寫復用的業務邏輯代碼，提供應用開發效率。 [特別注意]目前react native在ios上僅支持ios7以上,Android僅支持Android4.1以上。 ?????? React Native項目github地址:[https://github.com/facebook/react-native](https://github.com/facebook/react-native) ?????? React Native項目官網文檔:[http://facebook.github.io/react-native/docs/getting-started.html](http://facebook.github.io/react-native/docs/getting-started.html) # (三)React Native配置安裝 ??????? 特別聲明:facebook官網說當前react native歡迎是需要OSX,不過我也看到了有人通過windows系統配置該環境哈~大家有興趣可以百度搜索一下。 ??????? 3.1.Homebrew安裝 ???????? Homebrew是OSX不可獲取的套件管理器，我們可以通過它獲取并且安裝很多組件,安裝方式如下: ~~~ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ~~~ 然后通過命令行執行brew -v進行檢查brew是否已經安裝成功。整體截圖如下:  ??3.2.Node.js安裝,我們需要安裝Node.js4.0或者更高版本,這邊推薦采用Node管理器nvm來進行安裝,nvm項目地址:[https://github.com/creationix/nvm](https://github.com/creationix/nvm) ???? 第一部分:安裝nvm，查看項目官網官方推送curl或者wget方式安裝或者更新nvm: ???? 第一種:curl方式: ~~~ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash ~~~ ? ? 第二種:wget方式: ~~~ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash ~~~ 不過在使用這兩種方式之前，我們可以采用brew install curl或者brew install wget來確保已經安裝curl或者wget。我這邊采用了第一種方式安裝，具體安裝截圖如下:  這樣我們已經安裝了nvm，但是最好我們配置一下環境變量到.bash_profile文件中，具體配置如下:  最終我們通過命令行執行nvm? --version檢查一下nvm是否已經安裝成功。 ?? 第二部分:安裝Node.js，根據官網文檔我們直接命令行執行如下命令即可完成完成: ~~~ nvm install node && nvm alias default node ~~~ 安裝截圖如下:  該會進行安裝Node.js最新版本，并且會給我們打個別名，方便使用。通過nvm我們可以安裝多個版本的Node.js，并且可以非常輕松的選擇不同的版本進行切換使用。 ???? 【注意】如果現在采用是Node5.0版本的版本，官網是推薦安裝npm 2，該版本比npm 3速度更加快。在安裝完Node之后，命令行運行npm install? -g npm@2安裝即可。 ?第三部分:安裝watchmam，該用于監控bug文件，并且可以觸發指定的操作，安裝方式如下: ~~~ brew install watchman ~~~ 安裝截圖如下:  ?第四部分:安裝flow,flow是一個 JavaScript 的靜態類型檢查器，建議安裝它，以方便找出代碼中可能存在的類型錯誤，官網:[http://www.flowtype.org/](http://www.flowtype.org/)? 具體命令為:brew install flow 安裝截圖如下:  ? ? ?3.3.原生開發環境安裝: ?????????? 針對iOS開發，我們只需要安裝Xcode7.0或者7.0以后版本，該可以通過AppStore進行下載安裝 ?????????? 針對Android開發，Android環境配置網上非常多了，我相應看這篇文章的朋友電腦上面基本都有Android開發環境的了~針對安裝詳細([點擊進入參考文章](http://wiki.jikexueyuan.com/project/react-native/DevelopmentSetupAndroid.html)) ???? 3.4.React Native安裝 ??????? 現在就是最后一步，也是最激動人心的時刻到了，我們使用命令行運行如下命令安裝React Native: ~~~ npm install -g react-native-cli ~~~ 安裝截圖如下:  ? ? ? ? ?經過以上的四個大步驟我們基本完成React Native從基本環境的搭建工作，下面我們來進行一個實例演示React Native項目的效果。 # (四)React Native第一個應用(AwesomeProject) ???????? 經過以上的四個大步驟我們基本完成React Native從基本環境的搭建工作，下面我們來進行一個實例演示React Native項目的效果。ReactNative第一個AwesomeProject，就不是HelloWorld啦。 ???????? 首先執行如下命令,生成一個工程: ~~~ react-native init AwesomeProject ~~~ 運行截圖如下:  目錄結構如下:  ? ? ? 我們仔細看上面的目錄，會發現該該生成android和ios兩個平臺的原生項目，大家有興趣可以打開android和ios目錄看一下，里邊就是一個Android? Studio和Xcode創建的項目。其中index.android.js和index.ios.js文件為Android和IOS的空殼應用文件。另外還有一個node_modules文件夾，該為Node.js存放和管理npm包得，也包含React Native框架文件。 查看項目部分代碼:index.android.js如下:  ? ??4.1.運行iOS 應用: ???????????? ①.命令行執行cd AwesomeProject,路徑切換到項目主目錄 ???????????? ②.點擊ios/AwesomeProkect.xcodeproj進行運行Xocde ???????????? ③.使用編輯器進行打開index.ios.js進行相關修改，然后運行應用即可。 ?????? 4.2.運行Android應用: ??????????? ①.命令行執行cd AwesomeProject,路徑切換到項目主目錄 ??????????? ②.命令行執行react-native run-android進行加載運行android 應用。 ??????????? ③.同樣可以使用編輯器進行打開和修改index.android.js文件，接著通過菜單按鈕選擇ReloadJS來進行刷新修改 ???? 運行截圖如下:    這些步驟，命令執行完之后，那么我們第一個應用也完美運行啦，具體看如下效果！  # (五)已存在React Native項目添加Android版本 ???????? 因為React Native的Android版本的發布要晚于iOS版本，所以有很多接觸React Native比較早的應用可能只有iOS版本，我們可以進行如下的操作，給添加Android版本: ???????? ①.修改package.json文件來更新react-native到最新版本 ???????? ②.運行npm install命令 ???????? ③.最后執行以下react-native android命令即可 # (六)最后總結 ???????? 今天我們從初始開始，安裝各種工具以及命令，完成了React Native的基礎環境的搭建，并且成功運行第一個React Native for Android的應用。下一篇我們對推薦IDE(Atom)以及相關插件的安裝配置講解。敬請期待~ ????????? 尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ 關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) 關注我的微博，可以獲得更多精彩內容 [](http://weibo.com/u/1855428195?s=6uyXnP)