2024最新: React Native集成到現(xiàn)有原生iOS應(yīng)用
1. 背景
最近組內(nèi)想再跨端方案上采用React Native, 主要是因?yàn)樵镜膄lutter方案有個(gè)致命的缺點(diǎn)孩等，要跟著app發(fā)版「刍現(xiàn)在的業(yè)務(wù)需求偏向活動(dòng)類(lèi)型的棺妓，原生不夠靈活畸冲，H5體驗(yàn)上差強(qiáng)人意。所以院刁，決定用React Native方法試試舔示，兩端的開(kāi)發(fā)都具備前端React的技術(shù)棧，所以開(kāi)發(fā)效率上會(huì)提升不少过吻。
2. 環(huán)境安裝調(diào)研
首先可以先看看這兩個(gè)哥們寫(xiě)的文章进泼，寫(xiě)的比較詳細(xì)了，基本是能搜到的最新的了
- React Native集成到現(xiàn)有原生應(yīng)用
- React Native 集成到iOS原有的項(xiàng)目上
- 官網(wǎng)的集成文檔Integration with Existing Apps
他們都有一個(gè)問(wèn)題：需要把現(xiàn)有的ios成功拷貝到RN工程下的ios目錄纤虽，這無(wú)疑對(duì)現(xiàn)有工程侵入比較大乳绕。
就像第一篇哥們wuwuFQ遇到的問(wèn)題：
集成React Native：
其實(shí)有兩種集成方案，第一種就是按照官方的步驟逼纸，在RN項(xiàng)目中添加自己原生的iOS和Android項(xiàng)目洋措。
另一種就是在原生項(xiàng)目中以submodule或子組件的形式添加RN，個(gè)人認(rèn)為后者的項(xiàng)目管理方式較好杰刽，不影響主項(xiàng)目的架構(gòu)菠发。
But王滤，網(wǎng)上給的Podfile配置都是低版本的react-native，我使用的版本是0.73.0的雷酪，我配置Podfile一直出錯(cuò)淑仆，在官方GitHub或QQ群提問(wèn)也沒(méi)人理我，最后我就按第一種配置了哥力，后面有哪位大神有第二種的配置方案蔗怠，可以教我一下~
3. 解決問(wèn)題
我的配置
mac：Apple M2，Sonoma14.4
cocoapod: 1.14.3
node: v20.9.0
3.1. 創(chuàng)建React Native新項(xiàng)目
默認(rèn)會(huì)創(chuàng)建最新的版本
npx react-native init RNTest001
或者安裝指定版本
npx react-native@latest init RNTest001
//注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)
npx react-native@0.68.0 init RNTest001
安裝完成成功
我用的默認(rèn)沒(méi)指定版本吩跋，生成的工程目錄如下：
然后寞射，不管三七二十一，用vs code打開(kāi)這個(gè)目錄锌钮，執(zhí)行 npm install 安裝所有node庫(kù)桥温。
打開(kāi)package.json看看, react默認(rèn)使用的是最新版本："0.75.4"
"dependencies": {
"react": "18.3.1",
"react-native": "0.75.4"
},
再然后，我們進(jìn)入到ios目錄梁丘，執(zhí)行 pod install
最后侵浸，返回RNTest001目錄，執(zhí)行npx react-native run-ios 就可以運(yùn)行起來(lái)demo工程了?
3.2 如何在現(xiàn)有ios工程集成
這里直接說(shuō)結(jié)論：
1氛谜、 首先將上一步RN工程的package.json 和 node_modules目錄拷貝到現(xiàn)有ios工程目錄下：
2掏觉、修改工程中的podfile， 將下圖紅框中的部分值漫，添加進(jìn)來(lái)
3澳腹、 執(zhí)行pod install，然后 build
因?yàn)?react-native": "0.75.4"是比較新的版本杨何，大概率你一定會(huì)遇到這個(gè)問(wèn)題：
'FBReactNativeSpec/FBReactNativeSpec.h' file not found
這個(gè)問(wèn)題看評(píng)論大部分人都有遇到酱塔，官方至今還沒(méi)有解決。
4危虱、沒(méi)有辦法Ｑ蛲蕖！埃跷，我們只能降級(jí)版本迁沫，逐個(gè)去試試，最終我們將版本定在：
ios=12.4, react=18.2.0 react-native=0.72.0
5捌蚊、確定完版本之后，就是重復(fù)上面的操作近弟， 切記??：node_modules一定是在執(zhí)行npm install之后再拷貝過(guò)來(lái)缅糟。
6、直到現(xiàn)有工程 build success 表示工程已經(jīng)安裝了react-native需要的所有SDK祷愉，至此窗宦，ios的RN環(huán)境搭建完成??
7赦颇、最后可以將開(kāi)發(fā)好RN工程，在iOS原生運(yùn)行RN赴涵，不在贅述媒怯！
最后
本文主要解決了，不用copy原工程就可以在原工程中集成react-native環(huán)境的問(wèn)題髓窜，中間也遇到了很多問(wèn)題沒(méi)有一一列出扇苞，有遇到任何問(wèn)題，歡迎留言交流??
