#
#
轉載請標明出處:
[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)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)