公司要準(zhǔn)備干新一代的跨平臺(tái)移動(dòng)端項(xiàng)目勇蝙，原有的phonegap 框架已經(jīng)不能滿足需求，因?yàn)槠湎鄬?duì)繁瑣的dom操作挨约、略顯不足的性能以及我們乏善可陳的優(yōu)化味混，讓這個(gè)hybrid App實(shí)在有點(diǎn)點(diǎn)不堪重負(fù)产雹。

• 在路由切換中，頁面較大翁锡，動(dòng)畫會(huì)有卡頓
• 非原生的一些個(gè)組件蔓挖，例如地圖，渲染性能跟不上盗誊，手勢(shì)支持也不夠完善时甚，缺乏原生體驗(yàn)。哈踱。

所以荒适，我們討論了React-Native 和Flutter 這類的跨平臺(tái)開發(fā)框架，覺得目前RN的社區(qū)比較大开镣，而且沒有DSL的限制刀诬。當(dāng)然個(gè)人覺得Flutter 的跨平臺(tái)更徹底些，性能和靈活性更優(yōu)邪财。RN 被確定為前端dev 的選項(xiàng)陕壹，so... 開始吧

環(huán)境搭建

對(duì)于React-Native Android 版本的開發(fā)編譯，需要 JDK1.8 + Android SDK树埠，所以最好安裝android studio 直接管理android 項(xiàng)目糠馆。react-native 的官方cli 是很好用的，默認(rèn)采用yarn 去管理各種依賴包怎憋。

npm install -g react-native-cli
react-native init [項(xiàng)目名稱]
cd 項(xiàng)目目錄 && react-native run-android
或者 react-native start

這是啟動(dòng)了一個(gè)Metro Bundler 和移動(dòng)設(shè)備進(jìn)行通信

幾步就可以開始第一次編譯打包這個(gè)rn 項(xiàng)目又碌。不過有許多坑需要踩：

先理解下項(xiàng)目結(jié)構(gòu)

image.png

這圖有點(diǎn)長(zhǎng)，不過就是react 的root組件 App.js 中的頁面邏輯被編譯為了對(duì)應(yīng)的一個(gè)android 項(xiàng)目绊袋，在我粗略的android 原生開發(fā)知識(shí)看來毕匀，rn 的 JSMainModule 也就是 index.js 是入口文件，對(duì)應(yīng)于 android 的mainApplication 和mainActivity癌别，所以mainApplication.java 中就需要import 對(duì)應(yīng)的原生lib. 例如基本的ReactApplication皂岔，還有一些額外的rn 庫(kù)，都是封裝的原生android 組件展姐。

因?yàn)镽eact App 一般都是單頁面程序躁垛，對(duì)應(yīng)于react-native也一樣，雖然我們有多個(gè)路由圾笨，但是對(duì)應(yīng)的 AndroidManifest.xml 缤苫，卻只有一個(gè)Activity。通常墅拭，所有的路由跳轉(zhuǎn)都發(fā)生在這個(gè)Activity 中活玲。在后續(xù)的深入中可能會(huì)涉及到 Intent 的使用，來完成應(yīng)用間通信。

兩端通信邏輯

我們用React 編寫的UI 組件和 原生組件之間舒憾，有一層映射關(guān)系镀钓，這個(gè)關(guān)系是由React-Native 的 UIManagerModule 核心模塊來管理的，UI 組件的增刪都會(huì)操作對(duì)應(yīng)的那個(gè)原生組件镀迂。至少在調(diào)試狀態(tài)下丁溅，就如第一張圖所示，Metro Bundler 就是Facebook 提供的 JS bundler探遵，我們可以在移動(dòng)設(shè)備上熱加載 改動(dòng)后的 JS 文件窟赏。 這些 JS 的模塊在RN app 內(nèi)通過 C++編寫的bridge 來和 原生組件通信，onPress, onPressIn 或者 onLongPress 都是如此觸發(fā)（這類觸摸事件的派發(fā)是我的推測(cè)）箱季。

兩端通信機(jī)制涯穷，引用自 https://levelup.gitconnected.com/wait-what-happens-when-my-react-native-application-starts-an-in-depth-look-inside-react-native-5f306ef3250f

具體落實(shí)到開發(fā)上，在調(diào)試狀態(tài)下支持熱加載藏雏，只要移動(dòng)設(shè)備和主機(jī)處于同一個(gè)局域網(wǎng)拷况，首次通過USB 安裝了調(diào)試版本的apk 后，就可以通過wifi 來熱加載 JS bundler掘殴，從而方便地調(diào)試赚瘦。具體的設(shè)置在 app 界面中打開dev settings-> debugging server host && port，配置主機(jī) IP 地址: 8081 即可

后續(xù)再記錄下一些有意思的過程吧奏寨，比如RN 上用什么圖表庫(kù)起意，既要可交互，動(dòng)畫效果也得不錯(cuò)病瞳。還有路由管理也是個(gè)基礎(chǔ)而復(fù)雜的活兒揽咕。

參考資料

https://facebook.github.io/react-native/docs/getting-started
wait-what-happens-when-my-react-native-application-starts