轉載請標明出處： [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)