RN新架構@0.7升級指南(iOS篇)

# React Native 新架構升級指南(iOS篇)

## 第一步:搭建環(huán)境

### 1. 安裝 HomeBrew(M1芯片)

在 ARM64 環(huán)境下安裝 HomeBrew:
```bash
/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"

安裝完成后铃剔,運行 which brew 確保 HomeBrew 安裝在 /opt/Homebrew

2. 安裝 Ruby

  • 安裝方式 1:使用 Homebrew 安裝 Ruby

    • 在 Rosetta 環(huán)境下安裝:
      brew install ruby
      
    • 在 ARM64 環(huán)境下安裝:
      arch -arm64 brew install ruby
      
  • 安裝方式 2:使用 RVM 安裝 Ruby

    • 安裝 RVM:
      curl -L get.rvm.io | bash -s stable
      
    • 啟用 RVM:
      source ~/.rvm/scripts/rvm
      
    • 安裝指定版本 Ruby:
      rvm install 2.7.4
      
    • 設置默認版本:
      rvm use 2.7.4 --default
      

第三步:基于 Ruby 安裝 CocoaPods

  • 如果使用 HomeBrew 安裝的 Ruby谴忧,則使用 HomeBrew 安裝 CocoaPods:

    • 在 Rosetta 環(huán)境下安裝:
      brew install cocoapods
      
    • 在 ARM64 環(huán)境下安裝:
      arch -arm64 brew install cocoapods
      
  • 如果使用 RVM 安裝的 Ruby,則使用 RubyGems 安裝 CocoaPods:

    • 安裝指定版本 CocoaPods:
      gem install cocoapods -v 1.14.3
      

關鍵提示

  • Ruby 的安裝方式決定 CocoaPods 的安裝方式。使用brew安裝ruby則使用brew安裝pod飒筑,使用rvm安裝ruby則使用gem安裝pod渤涌,保持干凈的環(huán)境
  • 使用 RVM 可以靈活管理不同的 Ruby 和 CocoaPods 版本佩谣。

第四步:安裝 npm

Node.js 官網 下載并安裝任意版本 Node.js(建議使用 18.19.0)。

第五步:安裝 nvm 管理 Node.js

  • 自動安裝:

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
    
  • 建議手動安裝

    • 下載 nvm 并手動運行 install.sh 腳本实蓬。
    • 安裝完成后茸俭,運行 which nvm 驗證安裝。

第六步:使用 nvm 安裝指定版本 Node.js

  • 安裝 Node.js 18.19.0:

    nvm install 18.19.0
    
  • 運行 nvm list 確認安裝版本安皱。

第七步:安裝 Yarn 等相關工具

根據 React Native 官方文檔安裝 Yarn 和其他所需工具调鬓。

第八步:創(chuàng)建使用新架構的 React Native 項目

  • 創(chuàng)建新項目并使用 0.75 版本的 React Native。

第九步:查看新項目下 Gemfile文件

  • 新項目默認生成 Gemfile酌伊,指定 pod 和 Ruby 版本袖迎,如當前環(huán)境不符,參照第十步調整

第十步:如遇和新項目下Gem文件要求(如ruby版本,pod版本)不符燕锥,安裝符合的版本

  • 卸載 CocoaPods(如已安裝 1.15 以上版本):

    brew uninstall cocoapods
    
  • 卸載 Ruby(如ruby使用 HomeBrew 安裝):

    brew uninstall ruby
    
  • 改為使用 RVM 安裝 Ruby 2.7.4辜贵,并使用 gem 安裝 CocoaPods 1.14.3。

注意:安裝 Ruby 時归形,如果在執(zhí)行 -j8 時遇到錯誤托慨,請檢查 OpenSSL 版本,并將其更改為 1.1 版本暇榴。

查看 OpenSSL 版本:

openssl version

修改方式

設置環(huán)境變量

運行以下命令厚棵,設置 OpenSSL 1.1 版本的環(huán)境變量:

export PATH="$(brew --prefix openssl@1.1)/bin:$PATH"
export LDFLAGS="-L$(brew --prefix openssl@1.1)/lib"
export CPPFLAGS="-I$(brew --prefix openssl@1.1)/include"
export PKG_CONFIG_PATH="$(brew --prefix openssl@1.1)/lib/pkgconfig"

將環(huán)境變量添加到 .zshrc 文件

運行以下命令,將上述環(huán)境變量永久添加到 .zshrc 文件中:

echo 'export PATH="$(brew --prefix openssl@1.1)/bin:$PATH"' >> ~/.zshrc
echo 'export LDFLAGS="-L$(brew --prefix openssl@1.1)/lib"' >> ~/.zshrc
echo 'export CPPFLAGS="-I$(brew --prefix openssl@1.1)/include"' >> ~/.zshrc
echo 'export PKG_CONFIG_PATH="$(brew --prefix openssl@1.1)/lib/pkgconfig"' >> ~/.zshrc

第三步:刷新 .zshrc 文件

執(zhí)行以下命令蔼紧,使更改生效:

source ~/.zshrc

確認 OpenSSL 版本

openssl version

然后重新嘗試安裝 Ruby婆硬。


## 第十一步:遷移舊項目

* 將 iOS 舊項目遷移至 iOS 文件夾,移除舊的 React Native 環(huán)境奸例,修改 Podfile 和構建腳本彬犯,使項目可編譯。

## 第十二步:配置 RN 新架構

* 根據新架構要求編譯 React Native 環(huán)境并設置 Xcode 中的相關部分查吊。

## 第十三步:啟用 TurboModule

* 在 iOS 上啟用 TurboModule谐区,參考 [React Native 官方文檔](https://reactnative.cn/docs/new-architecture-app-modules-ios)。

代碼整理后盡量改為單例管理逻卖,在 `AppDelegate` 中異步初始化 RNBridge宋列,優(yōu)化啟動速度。

## 第十四步:跨平臺一致性

* 確保 iOS 和 Android 側的橋接方法名评也、參數(shù)名炼杖、參數(shù)類型一致。否則新架構不支持
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末盗迟,一起剝皮案震驚了整個濱河市坤邪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌诈乒,老刑警劉巖罩扇,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異怕磨,居然都是意外死亡喂饥,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門肠鲫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來员帮,“玉大人,你說我怎么就攤上這事导饲±谈撸” “怎么了氯材?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長硝岗。 經常有香客問我氢哮,道長,這世上最難降的妖魔是什么型檀? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任冗尤,我火速辦了婚禮,結果婚禮上胀溺,老公的妹妹穿的比我還像新娘裂七。我一直安慰自己,他們只是感情好仓坞,可當我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布背零。 她就那樣靜靜地躺著,像睡著了一般无埃。 火紅的嫁衣襯著肌膚如雪徙瓶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天录语,我揣著相機與錄音倍啥,去河邊找鬼禾乘。 笑死澎埠,一個胖子當著我的面吹牛,可吹牛的內容都是我干的始藕。 我是一名探鬼主播蒲稳,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼伍派!你這毒婦竟也來了江耀?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤诉植,失蹤者是張志新(化名)和其女友劉穎祥国,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晾腔,經...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡舌稀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了灼擂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壁查。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖剔应,靈堂內的尸體忽然破棺而出睡腿,到底是詐尸還是另有隱情语御,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布席怪,位于F島的核電站应闯,受9級特大地震影響,放射性物質發(fā)生泄漏挂捻。R本人自食惡果不足惜孽锥,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望细层。 院中可真熱鬧惜辑,春花似錦、人聲如沸疫赎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捧搞。三九已至抵卫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間胎撇,已是汗流浹背介粘。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留晚树,地道東北人姻采。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像爵憎,于是被迫代替她去往敵國和親慨亲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,086評論 2 355