现有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

你可能感兴趣的:(现有iOS项目集成React-Native 0.61.5)