美文网首页
iOS原生混编Flutter

iOS原生混编Flutter

作者: 十一月的肖邦_ShawEW | 来源:发表于2020-04-14 13:42 被阅读0次

    源码接入方案,后续探索交互传值、产物集成方案。

    步骤

    一、创建iOS原生项目

    二、创建Flutter模块

    WX20200414-132327@2x.png
    1. 需要在项目的同级目录下创建。

    2. 通过命令行创建。

    flutter create -t module my_flutter
    
    1. 进入到FlutterDemo的iOS 主工程目录。

    2. 使用Cocoapods。

      • 创建podfile文件。

        pod init

      • 执行pod install 看到安装了Flutter

        Downloading dependencies
        Installing Flutter (1.0.0)
        Installing FlutterPluginRegistrant (0.0.1)
        Generating Pods project
        Integrating client project
        
      • 在podfile文件中添加代码

         # Comment the next line if you don't want to use dynamic frameworks
         use_frameworks!
        ​
         # Pods for FlutterDemo
        ​
         flutter_application_path = '../my_flutter'
         load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
         install_all_flutter_pods(flutter_application_path)
        ​
        end
        
        • flutter_application_path填入相对路径

        • 这是Flutter 版本 >= 1.10.14版本的配置

        • 老版本的配置如下:

        flutter_application_path = 'path/to/my_flutter/'
        eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
        

      最后记得根据上图的提示,将Run Script紧挨着Target Dependencies phase的下面,接下来就可以通过⌘B构建你的项目了。如果找不到这个sh文件,也可以填入完整路径。

    除此之外老版本还需要在build phase中添加脚本代码用来构建Dart代码。

    添加脚本

    添加脚本

      "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
      "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
    
    1. 禁用Bitcode

      Flutter 暂时不支持Bitcode

    三、iOS原生界面跳转到Flutter界面

    1. 导包

      #import <Flutter/Flutter.h>
      #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // 如果你需要用到Flutter插件时
      
    2. 界面弹出,这里使用模态视图

      FlutterViewController *flutterViewController = [FlutterViewController new];
      //GeneratedPluginRegistrant.register(with: flutterViewController);//如果你需要用到Flutter插件时
      [flutterViewController setInitialRoute:@"route1"];
      [self presentViewController:flutterViewController animated:true completion:nil];
      
    3. Dart中的路由配置

      void main() => runApp(_widgetForRoute(window.defaultRouteName));
      ​
      Widget _widgetForRoute(String route) {
      switch (route) {
      case 'route1':
      return MyApp();
      default:
      return Center(
      child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
      }
      }
      

    参考

    https://www.cnblogs.com/tanglei/p/10656525.html
    https://rencheng.cc/2020/03/02/flutter/Flutter%E4%B8%8EiOS%E9%9B%86%E6%88%90/
    https://www.jianshu.com/p/aa7f3d5b93fc
    https://www.jianshu.com/p/7a7780dca2a3

    相关文章

      网友评论

          本文标题:iOS原生混编Flutter

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