学习日记（1） 成功运行、编译RN-android的爬坑记录

前言

• 从15年下半年开始，不断的在网络上看见各路大神推荐React Native是如何神通广大，但对于初识Android的我来说并不理解这到底是个什么东西。最近团队打算用这个技术实现我们客户端App的首页（会不定期发布活动），这对于我来说又是一次自我的提升和学习机会。

定义

• 什么是React Native？
  这个也是我当初第一次接触到这个概念的疑问，不过纵观网上各路帖子，但一直以来都很模糊。React Native 底层是Java Script ，调用的是原生组件，而非HTML5组件（HTML + CSS + JavaScript）。运行时，可以做到与Native App媲美的体验，同时因为JavaScript代码可以使用后端强大的Web方式管理，既可以做到高效开发，也可以做到快速部署和热修复。通俗的话来说，就是使用js代码来调用android的原生控件，来解决webview在app的性能问题，并且能做到服务端快速部署和热修复，避免不断发版本来更新影响用户体验的缺点。

• 为什么要使用React Native？
  最初也提到了，用这个技术来改善app首页样式的灵活性和丰富性。虽然，现在的做法也是由服务端来控制首页的布局加载（首页由很多个block来构建，类似于搭积木一样，也类似于recycleview 通过不同的type返回的layout来组装出一个首页），但优缺点都显而易见。
  优点是：原生实现，体验好。
  缺点是：不够灵活，样式不够丰富，只有通过每次版本升级来增加其余样式block（大家想想淘宝、天猫的首页，就能体会到了）。 虽然说react-native解决了以往webview的性能问题，和服务端控制的灵活问题。但对于这样的一个新技术，封装出一套可维护性扩展性能高的框架，也是今后研究的重难点。
  （阿里开源了weex，之前看过https://zhuanlan.zhihu.com/p/21677103这篇weex和RN的对比，文章中指出weex解决了RN封装的问题，不过笔者打算先自己尝试体会封装RN，再感受weex，这里以后再谈）

环境搭建

• https://facebook.github.io/react-native/docs/getting-started.html#content ； 官方说明虽然是英文的，不过很有用，笔者在Linux 和 Windows 下根据起提示的操作环境，都成功搭建起了环境。

建立、运行React Native项目

• http://reactnative.cn/post/10，这篇帖子是在Windows下的项目建立。

编译、运行RN项目爬坑

• 关于运行react-native run-android编译报错的问题，这里大家一是可以通过报错的异常信息提示来进行处理，二可以搜索异常解决方案，网上都有很详细的信息。这里就不重复赘述了，笔者都是这样过来的，都能够搜索到。
• 这里主要提示一下新手从网上下载的RN项目源码，或者自己建立的项目，打开项目一定要遵循以下步骤，以免遇到一些莫名其妙的坑。
  1.切换到项目目录下
  2.执行npm install
  3.raect-native run-android
  4.如果启动报错，执行npm start的命令
  （以下是Windows环境下的截图）
  

总结

• 这里给大家推荐两个比较好的学习地址：
  https://facebook.github.io/react-native/docs/getting-started.html#content
  http://reactnative.cn/
• 以及一个简单的开源项目：
  https://github.com/KevinOfNeu/xReddit