React-Native for Android

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截圖
1
2
3
4
5
6
7
8
9
10
  • 開始我們的源碼分析
  • 獲取注冊(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)

java->js
  • 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層

Js->java

這里在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

自己寫的一個(gè)小項(xiàng)目

參考文章:

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)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,171評(píng)論 25 708
  • 聽媽媽說哥哥們對(duì)她住樓上有顧慮,為讓大家安心,受老五之托,我們也談?wù)勎覀兊目捶ǎ嚎v觀歷史,不孝子會(huì)被天打雷辟,沒聽...
    王海英8969閱讀 2,905評(píng)論 0 0
  • 日精進(jìn)441天 體驗(yàn)入: 面對(duì)競(jìng)爭(zhēng)激烈的市場(chǎng),感到危機(jī)四伏!價(jià)格高了顧客不買單,質(zhì)量不好顧客還是不買單。給員工工資...
    宇宙之愛黃昊貴閱讀 214評(píng)論 0 0
  • 告別了學(xué)生時(shí)代,尤其是高中畢業(yè)后,早起似乎對(duì)我們而言已經(jīng)變得越來越遙遠(yuǎn)。我想,沒有人是不愿意自己變得更好,多金...
    巖城小混混閱讀 718評(píng)論 1 1
  • 落塵惜閱讀 267評(píng)論 0 1

友情鏈接更多精彩內(nèi)容