2024最新: React Native集成到现有原生iOS应用
1. 背景
最近组内想再跨端方案上采用React Native, 主要是因为原本的flutter方案有个致命的缺点，要跟着app发版。现在的业务需求偏向活动类型的，原生不够灵活，H5体验上差强人意。所以，决定用React Native方法试试，两端的开发都具备前端React的技术栈，所以开发效率上会提升不少。
2. 环境安装调研
首先可以先看看这两个哥们写的文章，写的比较详细了，基本是能搜到的最新的了
他们都有一个问题：需要把现有的ios成功拷贝到RN工程下的ios目录，这无疑对现有工程侵入比较大。
就像第一篇哥们wuwuFQ遇到的问题：
集成React Native：
其实有两种集成方案，第一种就是按照官方的步骤，在RN项目中添加自己原生的iOS和Android项目。
另一种就是在原生项目中以submodule或子组件的形式添加RN，个人认为后者的项目管理方式较好，不影响主项目的架构。
But，网上给的Podfile配置都是低版本的react-native，我使用的版本是0.73.0的，我配置Podfile一直出错，在官方GitHub或QQ群提问也没人理我，最后我就按第一种配置了，后面有哪位大神有第二种的配置方案，可以教我一下~
3. 解决问题
我的配置
mac：Apple M2，Sonoma14.4
cocoapod: 1.14.3
node: v20.9.0
3.1. 创建React Native新项目
默认会创建最新的版本
npx react-native init RNTest001
或者安装指定版本
npx react-native@latest init RNTest001
//注意版本号必须精确到两个小数点
npx react-native@0.68.0 init RNTest001
安装完成成功
我用的默认没指定版本，生成的工程目录如下：
然后，不管三七二十一，用vs code打开这个目录，执行 npm install 安装所有node库。
打开package.json看看, react默认使用的是最新版本："0.75.4"
"dependencies": {
"react": "18.3.1",
"react-native": "0.75.4"
},
再然后，我们进入到ios目录，执行 pod install
最后，返回RNTest001目录，执行npx react-native run-ios 就可以运行起来demo工程了✅
3.2 如何在现有ios工程集成
这里直接说结论：
1、 首先将上一步RN工程的package.json 和 node_modules目录拷贝到现有ios工程目录下：
2、修改工程中的podfile， 将下图红框中的部分，添加进来
3、 执行pod install，然后 build
因为"react-native": "0.75.4"是比较新的版本，大概率你一定会遇到这个问题：
'FBReactNativeSpec/FBReactNativeSpec.h' file not found
这个问题看评论大部分人都有遇到，官方至今还没有解决。
4、没有办法！！，我们只能降级版本，逐个去试试，最终我们将版本定在：
ios=12.4, react=18.2.0 react-native=0.72.0
5、确定完版本之后，就是重复上面的操作， 切记‼️：node_modules一定是在执行npm install之后再拷贝过来。
6、直到现有工程 build success 表示工程已经安装了react-native需要的所有SDK，至此，ios的RN环境搭建完成✅✅
7、最后可以将开发好RN工程，在iOS原生运行RN，不在赘述！
最后
本文主要解决了，不用copy原工程就可以在原工程中集成react-native环境的问题，中间也遇到了很多问题没有一一列出，有遇到任何问题，欢迎留言交流👏
