公司要准备干新一代的跨平台移动端项目，原有的phonegap 框架已经不能满足需求，因为其相对繁琐的dom操作、略显不足的性能以及我们乏善可陈的优化，让这个hybrid App实在有点点不堪重负。
- 在路由切换中，页面较大，动画会有卡顿
- 非原生的一些个组件，例如地图，渲染性能跟不上，手势支持也不够完善，缺乏原生体验。。
所以，我们讨论了React-Native 和Flutter 这类的跨平台开发框架，觉得目前RN的社区比较大，而且没有DSL的限制。当然个人觉得Flutter 的跨平台更彻底些，性能和灵活性更优。RN 被确定为前端dev 的选项，so... 开始吧
环境搭建
对于React-Native Android 版本的开发编译，需要 JDK1.8 + Android SDK，所以最好安装android studio 直接管理android 项目。react-native 的官方cli 是很好用的，默认采用yarn 去管理各种依赖包。
npm install -g react-native-cli
react-native init [项目名称]
cd 项目目录 && react-native run-android
或者 react-native start
几步就可以开始第一次编译打包这个rn 项目。不过有许多坑需要踩：
先理解下项目结构
这图有点长，不过就是react 的root组件 App.js 中的页面逻辑被编译为了对应的一个android 项目，在我粗略的android 原生开发知识看来，rn 的 JSMainModule 也就是 index.js 是入口文件，对应于 android 的mainApplication 和mainActivity，所以mainApplication.java 中就需要import 对应的原生lib. 例如基本的ReactApplication，还有一些额外的rn 库，都是封装的原生android 组件。
因为React App 一般都是单页面程序，对应于react-native也一样，虽然我们有多个路由，但是对应的 AndroidManifest.xml ，却只有一个Activity。通常，所有的路由跳转都发生在这个Activity 中。在后续的深入中可能会涉及到 Intent 的使用，来完成应用间通信。
两端通信逻辑
我们用React 编写的UI 组件和 原生组件之间，有一层映射关系，这个关系是由React-Native 的 UIManagerModule 核心模块来管理的，UI 组件的增删都会操作对应的那个原生组件。至少在调试状态下，就如第一张图所示，Metro Bundler 就是Facebook 提供的 JS bundler，我们可以在移动设备上热加载 改动后的 JS 文件。 这些 JS 的模块在RN app 内通过 C++编写的bridge 来和 原生组件通信，onPress, onPressIn 或者 onLongPress 都是如此触发（这类触摸事件的派发是我的推测）。
具体落实到开发上，在调试状态下支持热加载，只要移动设备和主机处于同一个局域网，首次通过USB 安装了调试版本的apk 后，就可以通过wifi 来热加载 JS bundler，从而方便地调试。具体的设置在 app 界面中打开dev settings-> debugging server host && port，配置主机 IP 地址: 8081 即可
后续再记录下一些有意思的过程吧，比如RN 上用什么图表库，既要可交互，动画效果也得不错。还有路由管理也是个基础而复杂的活儿。
参考资料
https://facebook.github.io/react-native/docs/getting-started
wait-what-happens-when-my-react-native-application-starts