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

作者: fightinghawk | 来源:发表于2018-12-02 13:23 被阅读0次

前言

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

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

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

集成到现有原生应用

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

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

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

现有RN项目结构

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之后可以发现项目已经成功的跑起来了

image.png

而此时的项目结构如下

项目结构

到此时就应该说大部分已经结束了,项目结构就跟原生的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