【React Native 】系統的瞭解一下

一.背景

今年GMTC直接改成大前端技術大會，裏面就有多個主題跟RN有關，可見其暢銷程度。雖然前段時間也有Airbnb 宣佈放棄使用 React Native，迴歸使用原生技術，但在國內RN仍是佔據混合開發主流，伴隨着人口紅利，頗有可能你正面臨別人已經解過的問題，O(∩_∩)O哈哈~

附:

移動端跨平臺開發的深度解析

如此繁榮的移動webapp開發市場：總結當下的一些移動web開發套件

二.配置

環境及調試配置按照官網便可: 附:

React Native 中文網

啓動指定設備:

react-native run-ios --simulator "iPhone 8」 複製代碼

查看具體可用設備名稱:

xcrun simctl list devices
複製代碼

2.1.導入RN到現有工程

按照官網能夠初始化一個已配置好的RN工程, 這裏介紹一下導入到現有工程:

2.1.1.手動導入

iOS-在現有項目中添加React Native（手動RNDemo）

2.1.2.cocoapods導入

iOS 和 React Native 混合編程（在現有的項目基礎上導入React Native） 注：

RN每次編譯的時候運行的react-native-xcode.sh腳本路徑是相對於工程.xcodeproj而言的, 若是工程文件層級變更須要更改下圖該路徑;xcode的文件路徑../表明一級, ../../表明兩級,與js文件路徑不一樣須要注意一下;

2.2.打包相關

2.2.1.離線包

React Native之打包

附:

react-native bundle [參數] 
構建js離線包 
選項: 
-h, --help 輸出如何使用的信息 
--entry-file <path> RN入口文件的路徑, 絕對路徑或相對路徑 
--platform [string] iOS或Andorid 
--transformer [string] 指定一個transformer被使用 
--dev [boolean] 若是爲false, 警告會不顯示而且打出的包的大小會變小 
--prepack 當經過時, 打包輸出將使用Prepack格式化 
--bridge-config [string] 使用Prepack的一個json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeConfig.json 
--bundle-output <string> 打包後的文件輸出目錄, 例: /tmp/groups.bundle 
--bundle-encoding [string] 打離線包的格式 可參考連接(https://nodejs.org/api/buffer.html#buffer_buffer). 
--sourcemap-output [string] 生成Source Map，但0.14以後再也不自動生成source map，須要手動指定這個參數。例: /tmp/groups.map --assets-dest [string] 打包時圖片資源的存儲路徑 
--verbose 顯示打包過程 
--reset-cache 移除緩存文件 
--config [string] 命令行的配置文件路徑

eg:
react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./bundle --dev false
複製代碼

ReactNative - 打離線包 (一) 原生RN命令打包

ReactNative - 打離線包 (二) 攜程 Moles-Packer 框架命令打包

2.2.2.拆包及熱更新

react-native熱更新全方位講解

58同城:基於拆分包的React Native在iOS端加載性能優化

React Native熱更新部署/熱更新-CodePush最新集成總結(新)

ReactNative增量升級方案

三.工程

下面介紹一下RN工程中的幾個點:

3.1.Bundle

1. bundle文件只有js代碼，不包含圖片等靜態資源；
2. debug模式：會爲真機打bundle包，不會爲模擬器打bundle包；release模式：必須用xcode編譯纔會打bundle包，此時不管是在模擬器仍是在真機運行，都會打bundle包；

react-native bundle 解釋與拆解

React Native打包代碼解析與拆分Bundle作法

---

注： react-native-xcode.sh腳本生成的bundle位置:

MyApp.app -> MyApp(顯示包內容)

---

3.2.工程介紹

RN工程中JS與OC的實現過程: JSX(React) ----> 轉化成javaScript ----> OC讀取 ----> 利用JavaScriptCore執行 ----> javaScript代碼返回一個數組(包含OC的對象，屬性，方法)並執行;

附：

【React Native】從源碼一步一步解析它的實現原理

3.3.性能優化

附：

React Native性能優化總結

四.學習

blog：(專題整理)

React Native學習資料

github：(star較多的學習資料)

• awesome-react-native
• RNStudyNotes
• react-naive-book
• react-native-guide
• react-native-lesson

本文主要是對React Native一些知識點總結，分享一些優秀資源，同時感謝🙏文中所引用連接做者的付出！！！！！