集成RN到现有的产品项目中的踩坑记

Posted 2022-03-02 openglnewbee

官方参考文档：

http://facebook.github.io/react-native/docs/integration-with-existing-apps.html

既然是踩坑记，那么即使很好的follow官方文档也是会有一些问题存在的；但它仍然是我们最权威的参考。

step1: 对于一个从xcode模版新建的工程来说，集成rn不是一件很难的事（我本来以为cocoapods安装的依赖会和react native link的插件冲突，后来发现是我多虑了）；主要的问题集中在pod文件上（这里附上我们的pod文件，可以看到，这个和文档推荐的不一样）：

platform :ios, '8.0'


target 'DHCloud' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'BatchedBridge',
    'CxxBridge',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  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'

end

post_install do |installer|
    installer.pods_project.targets.each do |target|
        if target.name == 'yoga'
            target.build_configurations.each do |config|
                config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
                config.build_settings['GCC_WARN_64_TO_32_BIT_CONVERSION'] = 'NO'
            end
        end
    end
end

我们使用的rn版本是0.52，所以我们需要cxxbridge,然后cxxbridge又依赖了一些别的东西，就是你们看到文件里写的那些（真的是一个都不能少）。而最下面那一行是为了解决编译yoga时候报错的问题，我理解这是一个facebook的瑕疵，实际上github上也有对应的issue存在。
对于一个原版的工程来说，我们本身没有集成.a或者其他的framework,工程配置也全部是默认的。所以，我们只要写好package.json和pods文件，执行 npm install 和 pod install 以后，我们就可以获得一个可用的项目，你可以任意添加需要的第三方插件；同时你也可以选择使用 react-native run-ios 或者直接从xcode来启动项目。

step2:

我们通过一个新项目验证了一些东西以后，最终需要集成到现有的native项目中。首先遇到的困难来自于pod install:

[!] The `DHCloud [Debug]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods-DHCloud/Pods-DHCloud.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `DHCloud [Release]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods-DHCloud/Pods-DHCloud.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target
target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/

这些告警日志绝对不可以忽略，但是我错误的理解了它的意思，导致我浪费了很多时间在这上面。在执行命令并打印出这些日志以后，再在这个工程上操作是无法修复之前的错误的；它所提示的添加

$(inherited)

是需要在运行pod install之前，在DHCloud的target的build设置的other link flags里面添加（other_ldflags就是代指other link flags），当你运行过一次pod install以后，你的工程文件已经出了问题，你再修改运行pod install也是不能解决问题的。这里的原因在于静态库，我们原先的工程里面就已经包含了.a和其他的framework，这样导致了pods的安装问题（也就是说,pods也没有那么智能，需要你添加一个标记才可以，具体的原因需要深入cocoapods的原理）。 解决了这个问题以后，我们已经可以通过xcode直接来运行项目了。
step3: 通过xcode运行项目我们觉得还不够，我们需要使用通常的 react-native run-ios方法来启动项目。但是我们运行以后，报错了（主要的信息如下）：

Print: Entry, ":CFBundleIdentifier", Does Not Exist

把它贴到搜索引擎以后得到的解决方案我认为对我这个问题来说明显是错误的（比如更新一些版本，重新运行命令，执行react-native upgrade之类）；这里的提示信息很明显，应该是触发的脚本里面去找这个CFBundleIdentifier，但却找不到。那么我们就去工程文件里添加这个东西；但这个问题却并没有那么容易解决。经过很多次尝试之后我才发现，需要在项目的project的build setting里面去改这个东西，在target的build setting里面改还是会报错。在project里面改完了以后就ok了。

step4:

我们还希望集成realm，这是一个和native有关的库。运行install和link之后，有一个下载realm-sync-cocoa-xxx.tar.gz的过程，无论如何这一步是必须要完成的（很容易遇到网络方面的问题，需要自行解决了）。运行时又报告了一大堆i386下xxx link失败的问题；之前工程里面也有过这样的警告：

Target 'Pods-DHCloud' of project 'Pods' was rejected as an implicit dependency for 'libPods-DHCloud.a' because its architectures 'x86_64' didn't contain all required architectures 'i386 x86_64'

我们需要对i386这个东西引起特别注意：在现在的iOS项目中，这个architecture根本就是不需要的，模拟器是x86,真机是arm的。所以我们很可能是编译了不必要的架构引起了错误（因为realm不支持也不需要支持i386）。检查项目配置，把所有的架构的Build active architecture only 的debug配置都改成YES后，问题解决。

在集成的过程中，还有一些比较容易解决的小错误，这里就不一一列出了；集成是一个工程问题，需要快速有效的获取信息、设计出逻辑上完备、高效的步骤去验证想法，最终得到一个比较满意的结果，在这个过程中需要耐心、细心和缜密的逻辑思维，同时需要具备相关的背景知识，否则很可能不得其门而入。