Flutter & iOS 混编 - CocoaPods 关联模式 (手把手)

一、 iOS 旧项目添加CocoaPods

1、cd 到项目根目录,生成Podfile文档:


2、 执行 :open -a xcode podfile 打开 1 生成的podfile文件

3、 在podfile 内添加需要的第三方插件,更改了podfile 记得update

    (ps:1: 需要的插件自己去pod search XXX 2:注意平台前注释 # 去掉)


4、 执行pod install --verbose --no-repo-update


至此cocoaPods 添加完成 ,运行工程,发现Podfile 内添加的头文件无法找到,继续

5、 选择Target - Build Settings 搜索User Header  双击User Header Search Paths 填空如下:


 二、 创建flutter_mould 

 官方建议的混合开发模式,必须要创建flutter_mould

1、命令行创建: `flutter create -t module flutter_module`

2、 创建的项目路径要选择好,一般我们会与原生项目目录并排,如下:



三、 关联 flutter_mould 

1、在iOS工程的poffile文件中添加如下命令:


flutter_application_path='../flutter_demo' #这里是我们创建的flutter_module的路径

load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')

target 'XXXAPP' do

  use_frameworks!

  # Flutter

  install_all_flutter_pods(flutter_application_path)

end


2、 执行Pod

输入命令 `pod install`


3、解决报错

首先 让我们的iOS项目 关联 Flutter模块,实用cocoapods关联,在podfile文件里添加如下代码


flutter_application_path = '../flutter_module'  //flutter模块的路径

load File.join(flutter_application_path,'.iOS','Flutter','podhelper.rb') //函数调用加载flutter

platform :ios, '12.0'

target 'NativeDemo' do

  install_all_flutter_pods(flutter_application_path)

  use_frameworks!

  # Pods for NativeDemo

end


第一次  ` pod install` 报错:


[!] Invalid `Podfile` file: Missing `flutter_post_install(installer)` in Podfile `post_install` block.

#  from /Users/zhangfan/Desktop/flutter_folder/NativeDemo/Podfile:7

#  -------------------------------------------

#  target 'NativeDemo' do

>    install_all_flutter_pods(flutter_application_path)

#    use_frameworks!

#  -------------------------------------------


处理方法:

在podfile结尾添加


target 'app' do

// 用的各sdk

end

// 新增的配置

post_install do |installer|

  flutter_post_install(installer) if defined?(flutter_post_install)

end


继续pod install 第二次报错:


[!] CocoaPods could not find compatible versions for pod "Flutter":

  In Podfile:

    Flutter (from `../flutter_module/.ios/Flutter`)

Specs satisfying the `Flutter (from `../flutter_module/.ios/Flutter`)` dependency were found, but they required a higher minimum deployment target.


处理方法:

修改原生Podfile文件里的Platform的版本号 和 flutter中iOS下Flutter.podspec文件中的ios.deployment_target 版本号一致!

若果Flutter module中不包含 Flutter.podspec ,则直接把IOS 原生项目中的支持版本号改成Podfile 中的一致


flutter_application_path = '../flutter_module'

load File.join(flutter_application_path,'.iOS','Flutter','podhelper.rb')

platform :ios, '12.0'//这里的版本号!和下图中ios.deployment_target 版本号一致!

target 'NativeDemo' do

  install_all_flutter_pods(flutter_application_path)

  use_frameworks!

  # Pods for NativeDemo

end

post_install do |installer|

  flutter_post_install(installer) if defined?(flutter_post_install)

end


pod install 成功后,编译项目第三次报错 :


Sandbox: rsync.samba(30002) deny(1) file-write-create /Users/zhangfan/Library/Developer/Xcode/DerivedData/NativeDemo-csscysefpzumudflovqmzgvixwno/Build/Products/Debug-iphonesimulator/Flutter.framework


处理方法:

1.Xcode targets 里面 buildsettings 搜索 User Script Sanboxing 改为 NO



新版本的Xcode 15 编译报该错误 右侧[工具栏]项目的workspace 和 pod的 space 都选择为15.0 即可.




 四、开发调试

1、 IOS 原生端代码 ,Appdelgate 中引入#import <Flutter/Flutter.h> 头文件,Appdelgate 中添加FlutterEngine 属性,m文件中初始化![](media/17286992004408/17302803723915.png)







2、 在项目中创建 FlutterDemoViewController 控制器,用来显示和处理和Flutter页面交互等相关逻辑,作用是原生跳转Flutter 入口


.m 文件中编写测试代码


#import "FlutterDemoViewController.h"

#import <Flutter/Flutter.h>

#import "AppDelegate.h"

@interface FlutterDemoViewController ()

@end

@implementation FlutterDemoViewController

- (void)viewDidLoad {

    [super viewDidLoad];


    UIButton * btn = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 100, 40)];

      [btn setTitle:@"打开Flutter" forState:UIControlStateNormal];

      [btn setTitleColor:UIColor.orangeColor forState:UIControlStateNormal];

      [btn addTarget:self action:@selector(clickAction) forControlEvents:UIControlEventTouchUpInside];

      [self.view addSubview:btn];

}

-(void)clickAction {

    [self project2];

}

//方案二

-(void)project2 {


    FlutterEngine *flutterEngine = ((AppDelegate *)[[UIApplication sharedApplication] delegate]).flutterEngine;

    FlutterViewController * flutter = [[FlutterViewController alloc]  initWithEngine:flutterEngine nibName:nil bundle:nil];


    //设置路由和参数

    [flutter pushRoute:@"/my_flutter_page"];

    [self.navigationController pushViewController:flutter animated:YES ];



}


1. 运行IOS 项目,效果如下:








OK,收工👌🏻


如有帮助,点个赞再走 😄

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容