React Native Android 原始碼分析之前期準備

騎摩托馬斯發表於2018-07-10
React NativeAndroid原始碼

前言

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 上的啟動過程

相關文章