太無聊了最近，找點事做，學一下RN豐富一下技術棧🫡。但是開發APP除了RN，還有一種選擇就是WebView，但是基于WebView的APP的性能被普遍認為不如RN，因為WebView本質上是一個容器，用于在應用中嵌入網頁或 HTML，它最主要的工作是將Web內容（HTML、CSS和JS）渲染到應用中。基于WebView的APP就像“在手機里又下載了一個瀏覽器，這是這個‘瀏覽器’專門用來呈現這個APP的內容”？像通過uni-app開發的APP就是默認基于WebView技術的。

而RN是一個混合框架，它通過橋接將JS和原生代碼（如iOS的Objective-C或Swift，Android的Java或Kotlin）連接起來，我們可以使用React來編寫UI和交互，而一些性能要求較高的部分（如攝像頭、加速計等）則可以通過原生模塊來處理。

RN的橋接我覺得很像Electron，Electron最猛的就是“可以調用Node環境下的API，再通過進程間的通信把調用結果傳遞到渲染進程（UI界面）。而Node那些API干的活便是調用操作系統提供的接口 (如果我沒記錯的話)”，這種做法帶來的作用就是開發者“仿佛可以在瀏覽器環境下調用操作系統原生的功能”，也算得上一種“橋接”吧。但Electron在渲染進程里干的事又很像WebView，因為他的UI是跑在瀏覽器環境下的，之前在zhihu上看到過一老哥說的一句話賊經典：一想到一下載一個Electron應用，我的電腦里就多了一個V8引擎我就覺得惡心。

環境準備（IOS開發）：

• XCode 14
• watchman 2025.04.28.00（監控文件變化。brew install watchman）
• cocoapods 1.16.2（包管理器，類似npm。brew install cocoapods）
• 初始化RN應用：npx @react-native-community/cli init MyFirstRN，React版本為19，RN版本為0.79.2
• 在Mac上調試：
  1. cd ios
  2. pod install
  3. cd ../
  4. yarn run ios
• 在iPhone上調試：指南

---

目錄

---

核心組件和原生組件

核心組件是RN內置的組件，它們封裝了原生平臺（iOS和Android）上的基本UI元素，包括但不限于：

View：類似于HTML中的<div>，用于布局和組織其他組件。
Text：用于顯示文本內容，類似于HTML中的<span>或<p>。
Image：用于顯示圖片，類似于HTML中的<img>。
ScrollView：用于允許內容滾動，類似于HTML中的<div>配合overflow: scroll。
TextInput：用于用戶輸入文本，類似于HTML中的<input>或<textarea>。
Button：用于創建按鈕，類似于HTML中的<button>。
FlatList 和 SectionList：用于高效地渲染列表數據。
TouchableOpacity 和 TouchableHighlight：用于處理觸摸事件。

核心組件的優勢在于它們是RN的一部分，通常具有更好的跨平臺一致性。

原生組件是指直接使用原生平臺（iOS或Android）的UI組件，而不是通過RN封裝的組件。開發原生組件通常需要編寫原生代碼，因此更適合需要高度定制化和高性能的場景。iOS原生組件使用Objective-C或Swift編寫，Android原生組件使用Java或Kotlin編寫。

但是有一個問題：RN的項目的編程語言是JS（TS），如果我非要用原生組件則意味著要寫其他語言，這還怎么整合？還是以iOS開發為例，封裝原生組件的過程為：

1. 創建一個新的Objective-C或Swift類
2. 使用RCTBridgeModule協議來注冊模塊
3. 在類中實現需要的功能和方法
4. 在RN項目中使用這個組件

---

困得一批，先睡覺了明天再學 🥱