已有react-native项目转换成iOS原生cocoapods集成的一些坑

前言

在工作中遇到一个需求,用原生集成多个react-native项目,关键是react-native项目还在开发,再新建一个原生项目来集成的话又比较麻烦,所以在react-native项目的基础上改成用cocoapods集成.
如有错误,请指出,必定虚心接受,立刻改正!

有关原生集成多个react-native项目

另外有写一篇文章,具体操作和内容请移驾iOS端实现React Native差异化增量更新

集成到现有原生应用

这个就不多讲了,react-native中文网里面写的很完整

现有react-native项目转换成iOS原生

我就拿一个测试项目来给各位试验一下(版本)

现有RN项目结构

iOS工程结构

那我们现在开始改造

1. cd 到RN项目工程下的ios文件夹
2. 执行 pod init

3. 编写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'

4. 保存后,执行 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之后可以发现项目已经成功的跑起来了

image.png

而此时的项目结构如下

项目结构

到此时就应该说大部分已经结束了,项目结构就跟原生的cocoapods项目结构一样了.

遇到的坑

做RN项目时,肯定会导入不同的第三方库,绝大部分三方库都是支持cocoapods的,那么如果遇到不支持的,或者是公司的私库,没有podspec文件,那么是不是就无法用了呢?
比如下方的库
react-native-yusha-customKeyboard
额,我RN项目做得不多,用到这个库是没有podspec文件的,就拿这个做示例吧

1. 先导入这个库

   
   
   导入成功
   
   

   因为没有podspec文件,那么我们在Podfile中也无法添加库

2. 那我们link试一下

   
   
   项目工程link之后
   
   

   我们发现原来的Libraries又出来了,然后多了一个CustomKeyboard,是否已经成功了呢,跑一下项目试试

   
   
   报错信息
   
   项目报错,找不到'React/RCTBridgeModule.h'
   之前再网上查资料,说link 和 cocoapods不能共存,看来是有道理的

3. 临时解决方案

   
   
   删除Libraries
   
   
   Add FIles to "Pods"
   
   

   在nodu_modules中找到这个库

   
   
   添加库
   
   添加到React的targets
   如果是还没升级,或者低版本的xcode,选择类之后,右边更改targets,.h和.m文件都要改一下
   
   更改targets
   
   
   image.png

然后再运行项目,我这边能够跑起来了,你们那边呢?