本文基于react-native v0.61.5集成

準備工作

首先，我們用 Xcode 快速建立一個只有首頁的基本工程，工程名為iOSDemo.

對于 iOS 工程來說，由于基本工程并不支持以組件化的方式管理項目，因此我們還需要多做一步，將其改造成使用 CocoaPods 管理的工程，也就是要在 iOSDemo 根目錄下創(chuàng)建一個只有基本信息的 Podfile 文件：

target 'iOSDemo' do
  use_frameworks!

  target 'iOSDemoTests' do
    inherit! :search_paths
  end

  target 'iOSDemoUITests' do
  end
end

然后，在命令行輸入 pod install 后，會自動生成一個 iOSDemo.xcworkspace 文件，這時我們就完成了 iOS 工程改造。

集成 React-Native

原生工程對 React-Native 的依賴主要分為兩部分：

• 對react natvie核心庫的依賴
• React代碼和資源的bundle依賴

創(chuàng)建同級目錄的React-Native項目, 上面創(chuàng)建的的iOSDemo 就對這個React-Native的核心庫和bundle進行依賴。

react-native init react_demo

然后我們分別對 react_demo 進行集成

iOS 模塊集成

在 iOS 平臺，原生工程對 React-Native 的依賴分別是:

• 對react natvie核心庫的依賴；
• React代碼和資源的bundle依賴(release模式使用離線包)

我們打開React-Native項目ios目錄下的Podfile，把需要依賴的Pods拷貝到iOSDemo下的Podfile，對相對路徑進行修改

workspace 'IOSDemo.xcworkspace'

def import_react_native
  
  require_relative '../react_demo/node_modules/@react-native-community/cli-platform-ios/native_modules'
  react_native = "../react_demo/node_modules/react-native"
  
  pod 'FBLazyVector', :path => "#{react_native}/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "#{react_native}/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "#{react_native}/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "#{react_native}/Libraries/TypeSafety"
  pod 'React', :path => "#{react_native}/"
  pod 'React-Core', :path => "#{react_native}/"
  pod 'React-CoreModules', :path => "#{react_native}/React/CoreModules"
  pod 'React-Core/DevSupport', :path => "#{react_native}/"
  pod 'React-RCTActionSheet', :path => "#{react_native}/Libraries/ActionSheetIOS"
  pod 'React-RCTAnimation', :path => "#{react_native}/Libraries/NativeAnimation"
  pod 'React-RCTBlob', :path => "#{react_native}/Libraries/Blob"
  pod 'React-RCTImage', :path => "#{react_native}/Libraries/Image"
  pod 'React-RCTLinking', :path => "#{react_native}/Libraries/LinkingIOS"
  pod 'React-RCTNetwork', :path => "#{react_native}/Libraries/Network"
  pod 'React-RCTSettings', :path => "#{react_native}/Libraries/Settings"
  pod 'React-RCTText', :path => "#{react_native}/Libraries/Text"
  pod 'React-RCTVibration', :path => "#{react_native}/Libraries/Vibration"
  pod 'React-Core/RCTWebSocket', :path => "#{react_native}/"
  
  pod 'React-cxxreact', :path => "#{react_native}/ReactCommon/cxxreact"
  pod 'React-jsi', :path => "#{react_native}/ReactCommon/jsi"
  pod 'React-jsiexecutor', :path => "#{react_native}/ReactCommon/jsiexecutor"
  pod 'React-jsinspector', :path => "#{react_native}/ReactCommon/jsinspector"
  pod 'ReactCommon/jscallinvoker', :path => "#{react_native}/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "#{react_native}/ReactCommon"
  pod 'Yoga', :path => "#{react_native}/ReactCommon/yoga"
  
  pod 'DoubleConversion', :podspec => "#{react_native}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{react_native}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{react_native}/third-party-podspecs/Folly.podspec"

end

target 'IOSDemo' do
  use_frameworks!
  import_react_native
  
  target 'IOSDemoTests' do
    inherit! :search_paths
  end

  target 'IOSDemoUITests' do
  end

end

pod install 一下，React-Native 模塊就集成進 iOS 原生工程中了。

接下來我們打開iOSDemo工程 在Build Phases加入腳本，添加啟動Packager服務腳本

export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../react_demo/node_modules/react-native/scripts/.packager.env"
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
    if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
      echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
      exit 2
    fi
  else
    open "$SRCROOT/../react_demo/node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
  fi
fi

我們在修改一下iOSDemo ViewController 在storyboard添加按鈕與點擊事件，點擊按鈕跳轉(zhuǎn)react-native界面

  @IBAction func present(_ sender: UIButton) {
    var jsCodeLocation: URL!
    #if DEBUG
    jsCodeLocation = URL(string: "http://10.30.10.155:8081/index.bundle?platform=ios")!
    #else
    jsCodeLocation = Bundle.main.url(forResource: "bundle/index.ios", withExtension: "jsbundle")
    #endif
    let rootView = RCTRootView(bundleURL: jsCodeLocation!, moduleName: "react_demo", initialProperties: nil, launchOptions: nil)
    let vc = UIViewController()
    vc.view = rootView
    present(vc, animated: true, completion: nil)
  }

現(xiàn)在我們只是集成了對DEBUG模式下的支持，接下來我來集成release模式。release模式需要生成react-native 離線包bundle.

我們在react_demo根目錄下執(zhí)行生成離線包命令

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle

• --entry-file ,ios或者android入口的js名稱，比如index.js
• --platform ,平臺名稱(ios或者android)
• --dev ,設置為false的時候?qū)avaScript代碼進行優(yōu)化處理。
• --bundle-output, 生成的jsbundle文件的名稱，比如./ios/bundle/index.ios.jsbundle（bundle目錄如果沒有手動創(chuàng)建一個，要不然找不到路徑）
• --assets-dest 圖片以及其他資源存放的目錄,比如./ios/bundle

最后我們再iOSDemo 右鍵點擊 Add Files to "iOSDemo" 選擇我們生成的離線包bundle, 不要勾選Copy items if needed 點擊Add, 這樣我們對release模式的離線包就添加進來了，對React代碼和資源的bundle依賴就完成了。

點擊xcode運行，最后運行程序，點擊跳轉(zhuǎn)，官方的 react-native component 也展示出來了。至此，iOS 工程的接入就完了。

ios_demo_s.png