前言
在工作中遇到一个需求,用原生集成多个react-native项目,关键是react-native项目还在开发,再新建一个原生项目来集成的话又比较麻烦,所以在react-native项目的基础上改成用cocoapods集成.
如有错误,请指出,必定虚心接受,立刻改正!
有关原生集成多个react-native项目
另外有写一篇文章,具体操作和内容请移驾iOS端实现React Native差异化增量更新
集成到现有原生应用
这个就不多讲了,react-native中文网里面写的很完整
现有react-native项目转换成iOS原生
我就拿一个测试项目来给各位试验一下(版本)
那我们现在开始改造
- cd 到RN项目工程下的ios文件夹
- 执行 pod init
-
编写Podfile文件,填入以下内容
新建的Podfile文件内容
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 调试功能需要此模块
'RCTAnimation', # FlatList和原生动画功能需要此模块
# 在这里继续添加你所需要的其他RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-
保存后,执行 pod install
成功展示
5.打开项目工程
集成cocoapods后的工程
6.删除原有RN引用
image.png
7.解决报错信息
报错信息
Edit Scheme
Build
我们会发现这边的React是missing,因为我们前面刚删掉,那么这边我们同时也删掉,并且添加新的React,并且选中React移到项目之前
添加pod中的React
移到项目之前
之后我们按住command+shitf+k clean一下项目
p.s.
存在问题,测试类中会报错'React/RCTLog.h' file not found,这边我们暂时让测试类不进入编译,有大佬知道如何解决的请告知,我后期如果知道解决方案的话也会更新文章,解决我留的坑
去掉测试类
再次run之后可以发现项目已经成功的跑起来了
而此时的项目结构如下
到此时就应该说大部分已经结束了,项目结构就跟原生的cocoapods项目结构一样了.
遇到的坑
做RN项目时,肯定会导入不同的第三方库,绝大部分三方库都是支持cocoapods的,那么如果遇到不支持的,或者是公司的私库,没有podspec文件,那么是不是就无法用了呢?
比如下方的库
react-native-yusha-customKeyboard
额,我RN项目做得不多,用到这个库是没有podspec文件的,就拿这个做示例吧
-
先导入这个库
导入成功
因为没有podspec文件,那么我们在Podfile中也无法添加库
-
那我们link试一下
项目工程link之后
我们发现原来的Libraries又出来了,然后多了一个CustomKeyboard,是否已经成功了呢,跑一下项目试试
报错信息
项目报错,找不到'React/RCTBridgeModule.h'
之前再网上查资料,说link 和 cocoapods不能共存,看来是有道理的 -
临时解决方案
删除Libraries
Add FIles to "Pods"
在nodu_modules中找到这个库
添加库
添加到React的targets
如果是还没升级,或者低版本的xcode,选择类之后,右边更改targets,.h和.m文件都要改一下
更改targets
image.png
然后再运行项目,我这边能够跑起来了,你们那边呢?