flutter&react-native 在iOS上的混合集成

阅读本篇文章需要开发者对flutter和react-native都有起码的了解 ，本人是做iOS出身，因此目前只做了关于iOS方面的尝试，希望能帮助到需要的人吧。

网上已经有太多关于flutter 和 react-native各方面对比的文章介绍、本文不做这种事情。

本人最近一直在研究react-native技术栈，但是今天突发奇想考虑能不能在一个工程中集成flutter 和 react-native两种当下最火热的跨平台方案到一个iOS工程中。

不管是flutter还是react-native都有集成到现有iOS原生工程中的方案，所以我推测从技术上我想的这种方法是可行的，在考虑从react-native所用的环境是node环境、flutter 是dart开发环境，所以两个技术不会相互影响

 

-------------------------------------------------------干货开始分割线------------------------------------------------

1、首先我们来看下混合并且成功运行之后的工程目录结构（当前是直接将react-native代码和rn所需的node环境移植到现有flutter环境中）

相信接触过react-native和flutter开发的人对当前目录结构并不会陌生、其实就是很暴力的直接把rn复制粘贴到flutter工程中了

再放两张图对工程目录和文件加以说明

flutter&react-native层已经配置完毕了。。只要是做过玩过这两种方案的开发人员对这个目录结构很容易理解

2、下面来看下xcode里面需要做什么操作吧、

首先看下rn的环境

rn在高于0.60.*的版本上是采用pod的形式管理rn的依赖库

flutter工程我是采用手动创建的形式。。具体代码为

 flutter create -t app -i objc -a kotlin 

此种方法创建的flutter工程可以指定iOS的版本为objc，在vscode创建的flutter工程在iOS平台的语言是默认swift （会对pod有影响），至于为什么不用swift 我只能说是因为react-native 一个名叫DoubleConversion的第三方依赖在swift环境下会有问题，应该也有解决办法，希望有真正的大神还不吝赐教

在iOS目录中 执行`pod  install`添加rn的依赖到iOS项目中、

上图红框中都是rn本身的依赖、必须在最外层项目中执行`yarn` 或者 `npm i`添加rn的第三方模块到目录node_modules中、pod install 其实就是把node_modules中的pod 库添加到iOS工程中

3、最后就是编译flutter

到目前为只应该是xcode中‘App.framework’ 和‘Flutter.framework’应该都是灰色的、除非已经编译过flutter了

在vscode编译或者直接fn+f5就可以直接运行flutter了，成功之后‘App.framework’ 和‘Flutter.framework’ 应该都可以了。

4、在xcode 中添加rn 的sh脚本

因为是把rn环境移植到flutter环境、所以flutter的脚本已经有了。

rn脚本如图所示

export NODE_BINARY=node

../node_modules/react-native/scripts/react-native-xcode.sh

我是直接在flutter根目录中添加rn的运行环境的、理论上应该也可以直接把rn的运行环境直接移植到iOS工程的根目录中，但是添加的脚本和pod依赖路径在/node_modules/之前就只能用一个点了，比如

export NODE_BINARY=node

./node_modules/react-native/scripts/react-native-xcode.sh

 

最后附上一张在flutter内部成功运行react-native代码的图

好了、至此，整个iOS项目中已经有了flutter和react-native了，虽然对大部分开发者此种方案用处不大，但是作为一种尝试也未尝不可。打开xcode 直接运行吧。

如果有兴趣可以联系我qq：1250623585