前言
React Native 是目前最流行的跨平臺框架,並且是 Facebook 團隊開源的專案。架構及實現技術上都有很高的研究價值,本系列就來分析一下 React Native 的一些核心程式碼。
此係列文章針對的是有過 React Native 開發經驗的小夥伴,沒有 React Native 開發基礎的小夥伴,可以先根據官方文件進行學習後,再來閱讀此係列文章
環境
以下是筆者研究 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 分支
具體的環境可以因人而異,但是請保證 Node 的版本需在 8 及以上, NDK 的版本一定要保證是 r10e, 具體的描述可參考官方文件
原始碼目錄分析
本系列將基於最新的 0.56-stable 進行分析,以下是原始碼核心目錄示意列表
. // react native 根目錄
+-- Libraries // JS 層的實現,包括 JS 佇列的封裝及 UI 元件的封裝
+-- local-cli // react native cli 的 JS 實現
+-- React // React Native iOS 層實現
+-- ReactAndroid // Android 層實現,本系列主要分析的地方
| +-- src
| +-- main
| +-- java // Java 層實現
| +-- jni // JNI 層的實現
+-- ReactCommon // React Native 核心程式碼實現目錄,為了跨平臺均使用 c++ 編寫
+-- ReactTester // Demo 入口
+-- README.md
複製程式碼
原始碼編譯
將原始碼下載到本地之後,可以使用 Android Studio 直接開啟 react native 的根目錄,RNTester
目錄下的 Android 例項專案可以作為我們分析原始碼的 Demo 程式。
在保證 Node 版本等於 8 及以上之後,可以直接在 react native 原始碼的根目錄下執行
$ npm install && npm run start
複製程式碼
將會下載相關依賴並且開啟 react native 的本地服務來,此時 Android Studio 執行專案將會安裝 RNTester App 安裝到模擬器或真機上。
注意,如果是使用真機執行,需要 adb reverse tcp:8081 tcp:8081 來講埠進行繫結
以上就是前期需要進行的準備,下面一起來分析一下 React Native 在 Android 上的啟動過程