集成RN到現有的產品項目中的踩坑記

官方參考文檔：

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後，問題解決。

在集成的過程中，還有一些比較容易解決的小錯誤，這裏就不一一列出了；集成是一個工程問題，需要快速有效的獲取信息、設計出邏輯上完備、高效的步驟去驗證想法，最終得到一個比較滿意的結果，在這個過程中需要耐心、細心和縝密的邏輯思維，同時需要具備相關的背景知識，否則很可能不得其門而入。