iOS原生混编Flutter

2020-04-14  本文已影响0人  十一月的肖邦_ShawEW

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

步骤

一、创建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

上一篇下一篇

猜你喜欢

热点阅读