现有iOS项目集成React-Native 0.61.5

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

准备工作

首先，我们用 Xcode 快速建立一个只有首页的基本工程，工程名为iOSDemo.

对于 iOS 工程来说，由于基本工程并不支持以组件化的方式管理项目，因此我们还需要多做一步，将其改造成使用 CocoaPods 管理的工程，也就是要在 iOSDemo 根目录下创建一个只有基本信息的 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依赖

创建同级目录的React-Native项目, 上面创建的的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添加按钮与点击事件，点击按钮跳转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)
  }

现在我们只是集成了对DEBUG模式下的支持，接下来我来集成release模式。release模式需要生成react-native 离线包bundle.

我们在react_demo根目录下执行生成离线包命令

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的时候将会对JavaScript代码进行优化处理。
• --bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle（bundle目录如果没有手动创建一个，要不然找不到路径）
• --assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

最后我们再iOSDemo 右键点击 Add Files to "iOSDemo" 选择我们生成的离线包bundle, 不要勾选Copy items if needed 点击Add, 这样我们对release模式的离线包就添加进来了，对React代码和资源的bundle依赖就完成了。

点击xcode运行，最后运行程序，点击跳转，官方的 react-native component 也展示出来了。至此，iOS 工程的接入就完了。

ios_demo_s.png

Demo