flutter與原生混編(iOS)

一港令、創(chuàng)建項(xiàng)目及配置
1扔涧,創(chuàng)建ios項(xiàng)目儡司,同時(shí)在同一個(gè)根目錄下創(chuàng)建flutter項(xiàng)目
flutter項(xiàng)目使用命令flutter create -t module xxxflutter項(xiàng)目名
如圖


工程目錄.png

2限匣,將flutter項(xiàng)目以pod的形式加入ios項(xiàng)目
2.1彤守,如果項(xiàng)目之前沒有用過pod徙融,則pod init創(chuàng)建podfile
如果使用過洒缀,直接進(jìn)行步驟2.2。
2.2欺冀,podfile中添加

flutter_application_path = '../xxxflutter項(xiàng)目名'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

flutter_application_path是flutter項(xiàng)目的路徑
2.3树绩,target中加入(一次性將flutter的編譯產(chǎn)物由此依賴進(jìn)入iOS項(xiàng)目中,可跳過步驟3)

install_all_flutter_pods(flutter_application_path)

3脚猾,配置腳本(已完成步驟2.3可進(jìn)行步驟4)
打開ios項(xiàng)目葱峡,在Build Phases中左上角添加Run Script


添加Run Script.png

Run Script內(nèi)容.png
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 

4,設(shè)置bitcode
Flutter 目前還不支持 BitCode龙助,需要設(shè)置為No


圖片.png

二砰奕、混編使以后添加的每個(gè)模塊都以package形式,在module中pubspec.yaml文件中引用(基于內(nèi)存消耗考慮)
1提鸟,頁面跳轉(zhuǎn)
原生處理:
flutter在iOS中的使用军援,主要是以FlutterViewController為載體,并在其內(nèi)部采用FlutterEngine對視圖進(jìn)行渲染称勋。
導(dǎo)入頭文件:

#import <Flutter/Flutter.h>
初始化FlutterEngine:
FlutterEngine *engine = [[FlutterEngine alloc] initWithName:@"xxx"];//xxx是唯一標(biāo)識
if ([engine run]) {
    self.flutterEngine = engine;
}
初始化flutter控制器
_flutterVC = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
跳轉(zhuǎn)
//“channelA”與flutter定義的名字保持一致
FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"channelA" binaryMessenger:self.flutterVC];
//使用指定的參數(shù)調(diào)用指定的Flutter方法胸哥,“methodA”與flutter定義的名字保持一致
[methodChannel invokeMethod:@"methodA" arguments:nil];
根據(jù)flutter定義的方法名做相應(yīng)的操作:在flutter頁面點(diǎn)擊按鈕跳轉(zhuǎn)至原生頁面
[methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
    if ([call.method isEqualToString:@"next"]) { //”next“為flutter定義的方法
        NativeViewController *vc = [[NativeViewController alloc] init];
        [self.navigationController pushViewController:vc animated:YES];
    }
}];
[self.navigationController pushViewController:self.flutterVC animated:YES]; //跳轉(zhuǎn)至flutter頁面

flutter處理:
在module項(xiàng)目的main里

導(dǎo)入頭文件
import 'package:flutter/services.dart';

定義channel,名字與原生保持一致

final MethodChannel _channelA = MethodChannel("methodA");
在init方法里添加在該channel上接收方法的回調(diào)
此處_pageIndex用來處理顯示flutter哪個(gè)頁面
_channelOne.setMethodCallHandler((call) {
  setState(() {
    _pageIndex = call.method;
  });
  return null;
});
flutter頁面點(diǎn)擊按鈕跳轉(zhuǎn)至原生頁面
onTap: () {
  MethodChannel(“channelA”).invokeMethod(“next”); 
  //channel名字和method名字需與原生保持一致
}

2赡鲜,數(shù)據(jù)傳遞
二者之間的數(shù)據(jù)傳遞iOS使用FlutterBasicMessageChannel類空厌,flutter使用BasicMessageChannel類庐船,用法與MethodChannel類似
原生處理:

初始化channel
self.msgChannel = [FlutterBasicMessageChannel messageChannelWithName:@“messageChannel" binaryMessenger:self.flutterVC];//同樣 channel名字與flutter保持一致

接收數(shù)據(jù):

處理接收到的flutter數(shù)據(jù)
[self.msgChannel setMessageHandler:^(id  _Nullable message, FlutterReply  _Nonnull callback) {
    NSLog(@"收到了來自flutter的消息:%@",message);
}];

發(fā)送數(shù)據(jù):

在需要向flutter發(fā)送數(shù)據(jù)的地方調(diào)用
[self.msgChannel sendMessage:message];

flutter處理:

首先依然是導(dǎo)入頭文件
import 'package:flutter/services.dart';

初始化channel,channel名字與原生保持一致
final BasicMessageChannel _msgChannel =
 BasicMessageChannel("messageChannel", StandardMessageCodec());
接收數(shù)據(jù):
在init方法里添加在該channel上接收方法的回調(diào)
_msgChannel.setMessageHandler((message) {
  print("收到了來之iOS的消息:$message");
  return null;
});
發(fā)送數(shù)據(jù):在需要的地方之間調(diào)用send方法即可
_msgChannel.send(message);

問題:


問題.png

網(wǎng)上搜的方法嘲更,在podfile最前邊加eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)句話
執(zhí)行pod install失敗

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

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

target 'iosfix' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iosfix
  install_all_flutter_pods(flutter_application_path)

  target 'iosfixTests' do
    inherit! :search_paths
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

  target 'iosfixUITests' do
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

end

于是又搜了下別的文章筐钟,添加的第二句話為load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb'),試了下成功了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赋朦,一起剝皮案震驚了整個(gè)濱河市篓冲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宠哄,老刑警劉巖壹将,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異毛嫉,居然都是意外死亡诽俯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門狱庇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惊畏,“玉大人,你說我怎么就攤上這事密任⊙掌簦” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵浪讳,是天一觀的道長缰盏。 經(jīng)常有香客問我,道長淹遵,這世上最難降的妖魔是什么口猜? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮透揣,結(jié)果婚禮上济炎,老公的妹妹穿的比我還像新娘。我一直安慰自己辐真,他們只是感情好须尚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著侍咱,像睡著了一般耐床。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上楔脯,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天撩轰,我揣著相機(jī)與錄音,去河邊找鬼。 笑死堪嫂,一個(gè)胖子當(dāng)著我的面吹牛偎箫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播溉苛,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼镜廉,長吁一口氣:“原來是場噩夢啊……” “哼弄诲!你這毒婦竟也來了愚战?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤齐遵,失蹤者是張志新(化名)和其女友劉穎寂玲,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梗摇,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拓哟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了伶授。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片断序。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖糜烹,靈堂內(nèi)的尸體忽然破棺而出违诗,到底是詐尸還是另有隱情,我是刑警寧澤疮蹦,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布诸迟,位于F島的核電站,受9級特大地震影響愕乎,放射性物質(zhì)發(fā)生泄漏阵苇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一感论、第九天 我趴在偏房一處隱蔽的房頂上張望绅项。 院中可真熱鬧,春花似錦比肄、人聲如沸快耿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽润努。三九已至,卻和暖如春示括,著一層夾襖步出監(jiān)牢的瞬間铺浇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工垛膝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鳍侣,地道東北人丁稀。 一個(gè)月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像倚聚,于是被迫代替她去往敵國和親线衫。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內(nèi)容