美文网首页
现有iOS项目集成React-Native 0.61.5

现有iOS项目集成React-Native 0.61.5

作者: 七分呗轻唱 | 来源:发表于2020-01-13 13:20 被阅读0次

    本文基于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

          本文链接:https://www.haomeiwen.com/subject/ozdbictx.html