最近工作需要,重新看 React Native (以下简称RN) 源码,了解机制,寻找优化空间,过程中看能不能整理出一些东西。
RN 这个项目已经是庞然大物,打开 github 项目主页,根目录下文件和文件夹就多达五六十个,看起来一脸懵逼,不知道哪些是源码,在看源码之前先理理 RN 最终用到哪些代码,项目是怎样创建,怎样跑起来的。以下皆以 iOS 端为例。
流程
先看看标准 RN 项目创建和运行过程:
- RN 根据教程装完环境后,会有一个全局命令
react-native
,执行react-native init AwesomeProject
可以创建一个新 RN 项目。 - XCode 打开自动生成的项目,编译到模拟器或真机,一个 RN hello world 程序成功运行了。
- 在模拟器运行同时会在 chrome 打开一个页面,在页面里使用 developer tools 可以直接断点调试 RN 页面上的 JS 源码。
疑问
上述流程跑下来整个过程是个黑盒,对黑盒里的处理有一些疑问点:
react-native init AwesomeProject
这个命令做了什么,是怎样创建 RN 模板项目的?- 项目 JS 源码在哪里,如何跑起来的?
- 怎样做到可以在 chrome 调试 JS 源码?
接下来一条条看。
(更多…)