轉載請標明出處:
[http://blog.csdn.net/developer_jiangqq/article/details/50633488](http://blog.csdn.net/developer_jiangqq/article/details/50633488)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)??????
??剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)。同時博客左側微信二維碼歡迎關注!
本React Native講解專題:主要講解了React Native開發,由基礎環境搭建配置入門,基礎,進階相關講解。
[關于React Native各種疑難雜癥,問題深坑總結方案請點擊查看:](http://www.lcode.org/react-native%E7%96%91%E9%9A%BE%E7%82%B9%E9%97%AE%E9%A2%98%E6%B7%B1%E5%9D%91%E6%9C%80%E5%BC%BA%E6%80%BB%E7%BB%93%E5%B8%96%E4%B8%8D%E6%96%AD%E6%9B%B4%E6%96%B0%E4%B8%AD/)
Mac和Windows安裝搭建React Native環境教程如下:
* Mac OS X版本:[Mac OS X安裝React Native環境點擊進入....](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native-for-android%e7%8e%af%e5%a2%83%e9%85%8d%e7%bd%ae%e4%bb%a5%e5%8f%8a%e7%ac%ac%e4%b8%80%e4%b8%aa%e5%ae%9e%e4%be%8b/)
* Windows版本:[Windows系統安裝React Native環境點擊進入...](http://www.lcode.org/%e5%8f%b2%e4%b8%8a%e6%9c%80%e8%af%a6%e7%bb%86windows%e7%89%88%e6%9c%ac%e6%90%ad%e5%bb%ba%e5%ae%89%e8%a3%85react-native%e7%8e%af%e5%a2%83%e9%85%8d%e7%bd%ae/)
(一).基本介紹:
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
React Native項目官網文檔:http://facebook.github.io/react-native/docs/getting-started.html
(二).基礎入門:
[1.React Native For Android環境配置以及第一個實例](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native-for-android%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E4%BB%A5%E5%8F%8A%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AE%9E%E4%BE%8B/)
[2.React Native開發IDE安裝及配置?](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BC%80%E5%8F%91ide%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE/)
[3.React Native應用設備運行(Running)以及調試(Debugging)](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%94%E7%94%A8%E8%AE%BE%E5%A4%87%E8%BF%90%E8%A1%8Crunning%E4%BB%A5%E5%8F%8A%E8%B0%83%E8%AF%95debugging/)
[4.React Native移植原生Android項目](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E7%A7%BB%E6%A4%8D%E5%8E%9F%E7%94%9Fandroid%E9%A1%B9%E7%9B%AE/)
[5.React Native進行簽名打包成Apk](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E8%BF%9B%E8%A1%8C%E7%AD%BE%E5%90%8D%E6%89%93%E5%8C%85%E6%88%90apk/)
[6.React Native庫版本升級(Upgrading)與降級講解](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%93%E7%89%88%E6%9C%AC%E5%8D%87%E7%BA%A7upgrading%E4%B8%8E%E9%99%8D%E7%BA%A7%E8%AE%B2%E8%A7%A3/)
(三).組件學習:
[1.React Native控件之View視圖講解](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bview%E8%A7%86%E5%9B%BE%E8%AE%B2%E8%A7%A3/)
[](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E9%85%8D%E7%BD%AE%E8%BF%90%E8%A1%8C%E5%AE%98%E6%96%B9%E4%BE%8B%E5%AD%90-%E5%88%9D%E5%AD%A6%E8%80%85%E7%9A%84%E7%A6%8F%E9%9F%B38/)[2.1.React Native配置運行官方例子-初學者的福音(Mac OS X版本)](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e9%85%8d%e7%bd%ae%e8%bf%90%e8%a1%8c%e5%ae%98%e6%96%b9%e4%be%8b%e5%ad%90-%e5%88%9d%e5%ad%a6%e8%80%85%e7%9a%84%e7%a6%8f%e9%9f%b38/)
[2.2.React Native配置超詳細編譯運行React Native官方實例UIExplorer項目(Windows版本)](http://www.lcode.org/%e8%b6%85%e8%af%a6%e7%bb%86windows%e7%89%88%e6%9c%ac%e7%bc%96%e8%af%91%e8%bf%90%e8%a1%8creact-native%e5%ae%98%e6%96%b9%e5%ae%9e%e4%be%8buiexplorer%e9%a1%b9%e7%9b%ae%e5%a4%9a%e5%9b%be%e6%85%8e/)
[3.React Native控件之Text組件講解](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Btext%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3/)
[4.React Native控件之Image組件講解與美團首頁頂部效果實例](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bimage%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3%E4%B8%8E%E7%BE%8E%E5%9B%A2%E9%A6%96%E9%A1%B5%E9%A1%B6%E9%83%A8%E6%95%88/)
[5.React Native控件之TextInput組件講解與QQ登錄界面實現](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Btextinput%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3%E4%B8%8Eqq%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2%E5%AE%9E%E7%8E%B011/)
[6.React Native控件之ProgressBarAndroid進度條講解](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bprogressbarandroid%E8%BF%9B%E5%BA%A6%E6%9D%A1%E8%AE%B2%E8%A7%A312/)
[7.React Native控件之DrawerLayoutAndroid抽屜導航切換組件講解](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bdrawerlayoutandroid%E6%8A%BD%E5%B1%89%E5%AF%BC%E8%88%AA%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A313/)
[8.React Native控件之ScrollView組件講解](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8bscrollview%e7%bb%84%e4%bb%b6%e8%ae%b2%e8%a7%a314/)
[9.WebStorm開發工具設置React Native代碼智能提醒](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91webstorm%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e8%ae%be%e7%bd%aereact-native%e4%bb%a3%e7%a0%81%e6%99%ba%e8%83%bd%e6%8f%90%e9%86%92/)
[10.React Native控件之ToolbarAndroid工具欄控件講解以及使用](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8btoolbarandroid%e5%b7%a5%e5%85%b7%e6%a0%8f%e6%8e%a7%e4%bb%b6%e8%ae%b2%e8%a7%a3%e4%bb%a5%e5%8f%8a%e4%bd%bf%e7%94%a8/)
[11.React Native控件之Switch開關與Picker選擇器組件講解以及使用](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8bswitch%e4%b8%8epicker%e7%bb%84%e4%bb%b6%e8%ae%b2%e8%a7%a3%e4%bb%a5%e5%8f%8a%e4%bd%bf%e7%94%a816/)
[12.React Native控件之ViewPagerAndroid講解以及美團首頁頂部效果實例](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8bviewpagerandroid%e8%ae%b2%e8%a7%a3%e4%bb%a5%e5%8f%8a%e7%be%8e%e5%9b%a2%e9%a6%96%e9%a1%b5%e9%a1%b6%e9%83%a8/)
[13.React Native控件之Touchable*系列組件詳解](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8btouchable%e7%b3%bb%e5%88%97%e7%bb%84%e4%bb%b6%e8%af%a6%e8%a7%a318/)
[14.React Native控件之ListView組件講解以及詳細實例](http://www.lcode.org/%e3%80%90react-native%e5%bc%80%e5%8f%91%e3%80%91react-native%e6%8e%a7%e4%bb%b6%e4%b9%8blistview%e7%bb%84%e4%bb%b6%e8%ae%b2%e8%a7%a3%e4%bb%a5%e5%8f%8a%e8%af%a6%e7%bb%86%e5%ae%9e%e4%be%8b19/)
(三).React Native開源項目:
1.Pober Wong_17童鞋為gank.io做的純React Native項目,開源地址:[https://github.com/Bob1993/React-Native-Gank](https://github.com/Bob1993/React-Native-Gank)
2.聶風童鞋做的《都看影視》React Native項目,開源地址:[https://github.com/changfuguo/doukanmv](https://github.com/changfuguo/doukanmv)
3.大大做的《新聞閱讀Reading》React Native項目,項目地址:[http://www.lcode.org/reading-app-react-native/](http://www.lcode.org/reading-app-react-native/)
聯系我
* Q ?Q:781931404
* 微信訂閱號:codedev123
* 郵箱:?[jiangqqlmj@163.com](mailto:jiangqqlmj@163.com)
* 微博:?[@Sky丶清](http://weibo.com/jiangqqlmj/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1)
* 個人網址:[http://www.lcode.org](http://www.lcode.org/)
* Github地址:[https://github.com/jiangqqlmj](https://github.com/jiangqqlmj)
技術交流群(QQ)
* Android菜鳥新聞群:99787482
* React Native交流群:282693535
* Android開發群3:109244103
? ? ? ?尊重原創,轉載請注明: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)