1.環(huán)境搭建:
搭建開發(fā)環(huán)境
Homebrew, Mac系統(tǒng)的包管理器,用于安裝NodeJS和一些其他必需的工具軟件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
譯注:在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local
目錄不可寫的權(quán)限問題??梢允褂孟旅娴拿钚迯?fù):
sudo chown -R whoami /usr/local
2.安裝nuclide 插件
https://github.com/facebook/nuclide/
cd nuclide
npm install(如果卡著不動(dòng)
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
將鏡像設(shè)置為淘寶的)
apm link
3.nuclide 的使用
React Native開發(fā)之IDE(Atom+Nuclide)安裝,運(yùn)行,調(diào)試
如果 進(jìn)入項(xiàng)目后 flow 出現(xiàn)
Launching Flow server for /Users/bjhl/AwesomeProject
Wrong version of Flow. The config specifies version ^0.33.0 but this is version 0.36.0
Could not start Flow server!
使用命令:
npm install flow-bin@0.33.0 -g
ps:終于在折騰了1周之后開始更新,這兩天看源碼看的腦袋暈暈的,有不對(duì)的地方指正。
現(xiàn)在使用的IDE是:用Sublime 3作為React Native的開發(fā)IDE 以及使用了flow
- 首先上幾張分享時(shí)的ppt截圖










- 開始我們的源碼分析
- 獲取注冊(cè)表
MainActivity => ReactActivity.Oncreat() => ReactActvityDelegate.Oncreat() => loadApp(p100) => CreatRootView.startApplication(開啟RN大門)
(1)getReactNativeHost.getReacrInstanceManager => ReactNativeHost 將ReactPackage扔到了ReactInstanceMangerImpl中
(2) startApplication =>ReactRootView( creatReactContextInBackground) => XReactInstanceManagerImpl (p370-p388) 判斷是Debug或者Release 獲取bundle.js,DEBUG 本地node服務(wù)器 ,Release獲取本地bundle.js文件
=> recreatReactContextInbackground (執(zhí)行)ReactContextInitAsynctask => p13-p204 doInbackground =>840-p861 CoreModulePackage (定義了RN框架核心的Java和Js Module)
=> p932 將各個(gè)模塊扔到對(duì)應(yīng)的build中(p873)處理我們?cè)贏ctivity中加載的模塊,此時(shí)Java端已經(jīng)擁有兩端的模塊注冊(cè)表了,再將Java,Js傳入Js端
=> CatalyInstanceImpl p105 執(zhí)行 InitialzeBridge(native方法) => Instance.cpp nativeToJsBridge_ 傳入到Js端

- Java->Js
因?yàn)樯线叺膶s/java模塊傳入到j(luò)s就是java到j(luò)s 的通信
所以接著看:XRectInstanceManagerImpl p193 異步任務(wù)-> p274
=> p763-P777 atttachMesureRootViewToInstance => p812 獲取JsMocule => JavaScriptMoculeRegistry.java p45
=> p110 獲取了moduleName mothName args => CatalystInstanceImpl p218 -p211 此時(shí)調(diào)用(Native)

- Js->Java
事件觸發(fā)的時(shí)候/通信時(shí) js將moduleName mothName args等傳入到MessageQueue.js 中,(p150) enqueueNativeCall 將JS中的方法名參數(shù)等扔到Queue中 ,(//todo 這里注意)java事件驅(qū)動(dòng)等觸發(fā)調(diào)用callFunctionReturnFlushedQueue/callFunctionReturnResultAndFlushedQueue
調(diào)用flushedQueue 將messageQueue通過C層返回到j(luò)ava層


這里在enqueueNativeCall函數(shù)被調(diào)用時(shí)push進(jìn)messageQueue中后:
React Native 的邏輯是,如果消息隊(duì)列中有等待 java 處理的邏輯,而且 java超過 5ms 都沒有來取走,那么 JavaScript 就會(huì)主動(dòng)調(diào)用 java 的方法
java調(diào)用js是一個(gè)主動(dòng)的過程,js調(diào)用java是一個(gè)被動(dòng)的過程,如果不取走就主動(dòng)調(diào)用java

參考文章:
React Native 觸摸事件處理詳解
React Native通信機(jī)制詳解
React native for Android 初步實(shí)踐[原理剖析]
ReactNative資料
React Native For Android 架構(gòu)初探
其實(shí)沒那么復(fù)雜!探究react-native通信機(jī)制
React Native 中文網(wǎng)