转载请标明出处： [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)