前言
React Native 是目前最流行的跨平台框架&＃xff0c;并且是 Facebook 团队开源的项目。架构及实现技术上都有很高的研究价值&＃xff0c;本系列就来分析一下 React Native 的一些核心代码。
此系列文章针对的是有过 React Native 开发经验的小伙伴&＃xff0c;没有 React Native 开发基础的小伙伴&＃xff0c;可以先根据官方文档进行学习后&＃xff0c;再来阅读此系列文章
环境
以下是笔者研究 React Native 源码时的环境
- OS: MacOS 10.13.5
- Node: v10.5.0
- Yarn: 1.7.0
- npm: 6.1.0
- Android Studio: Version 3.1.3
- NDK: android-ndk-r10e
- React Native: 0.56-stable 分支
具体的环境可以因人而异&＃xff0c;但是请保证 Node 的版本需在 8 及以上&＃xff0c; NDK 的版本一定要保证是 r10e, 具体的描述可参考官方文档
源码目录分析
本系列将基于最新的 0.56-stable 进行分析&＃xff0c;以下是源码核心目录示意列表
. // react native 根目录
&＃43;-- Libraries // JS 层的实现&＃xff0c;包括 JS 队列的封装及 UI 组件的封装
&＃43;-- local-cli // react native cli 的 JS 实现
&＃43;-- React // React Native iOS 层实现
&＃43;-- ReactAndroid // Android 层实现&＃xff0c;本系列主要分析的地方
| &＃43;-- src
| &＃43;-- main
| &＃43;-- java // Java 层实现
| &＃43;-- jni // JNI 层的实现
&＃43;-- ReactCommon // React Native 核心代码实现目录&＃xff0c;为了跨平台均使用 c&＃43;&＃43; 编写
&＃43;-- ReactTester // Demo 入口
&＃43;-- README.md
源码编译
将源码下载到本地之后&＃xff0c;可以使用 Android Studio 直接打开 react native 的根目录&＃xff0c;RNTester 目录下的 Android 实例项目可以作为我们分析源码的 Demo 程序。
在保证 Node 版本等于 8 及以上之后&＃xff0c;可以直接在 react native 源码的根目录下运行
$ npm install && npm run start
将会下载相关依赖并且开启 react native 的本地服务来&＃xff0c;此时 Android Studio 运行项目将会安装 RNTester App 安装到模拟器或真机上。
注意&＃xff0c;如果是使用真机运行&＃xff0c;需要 adb reverse tcp:8081 tcp:8081 来讲端口进行绑定
以上就是前期需要进行的准备&＃xff0c;下面一起来分析一下 React Native 在 Android 上的启动过程
京公网安备 11010802041100号