app 引入h5 页面抖动_如何在传统的本机应用程序中引入抖动

app 引入h5 页面抖动

Flutter’s declarative and reactive UI, support for the application state, smooth animations and dual-platform availability are compelling reasons for the mobile developer to create production-ready apps in Flutter.

Flutter的声明性和响应式UI，对应用程序状态的支持，流畅的动画和双平台可用性是移动开发人员在Flutter中创建可用于生产环境的应用程序的重要原因。

But as developers, we don’t get a chance to create a new app every day. Developer life is not always exploratory. More often, we as developers must enhance, maintain, add new features in the legacy apps built on Android and iOS. This leaves developers with not much of an opportunity to work on exciting new frameworks like Flutter.

但是作为开发人员，我们没有机会每天创建一个新应用。 开发人员的生活并不总是探索性的。 作为开发人员，我们通常必须在基于Android和iOS的旧版应用程序中增强，维护，添加新功能。 这给开发人员带来了很多机会来开发激动人心的新框架(如Flutter)。

Maybe you have the question, can I use Flutter in the existing native app?

也许您有问题， 我可以在现有的本机应用程序中使用Flutter吗？

The answer is Yes.

答案是肯定的。

Creating a brand new native app using Flutter is quite straightforward, we have plenty of examples already. We will explore in the rest of the post, how to leverage Flutter based UI in the existing native apps.

使用Flutter创建全新的本机应用程序非常简单，我们已经有很多示例。 我们将在文章的其余部分中探讨如何在现有的本机应用程序中利用基于Flutter的UI。

Note: These features are experimental, expected to undergo evolutionary changes, the concepts you are learning may not change.

注意：这些功能是实验性的，预计会发生演变，您正在学习的概念可能不会更改。

积分 (Integration)

How do we integrate a flutter screen into an existing app (host)?

我们如何将抖动屏幕集成到现有应用程序(主机)中？

Before we start about the integration, we need to think about the best way to export the flutter screen into the native apps.

在开始集成之前，我们需要考虑将抖动屏幕导出到本机应用程序的最佳方法。

Visualize your flutter screens as components.

将抖动屏幕可视化为组件。

What is a Component?

什么是组件？

Components are pieces of functionality that can be independently replaceable and upgradeable.

组件是可以独立替换和升级的功能。

Flutter UI with the virtue of the fact can be used in both Android and iOS, it qualifies to be developed as an independent piece — component.

基于事实的Flutter UI可以在Android和iOS中使用，它有资格作为独立的组件进行开发。

Once the Flutter component is created, how do they will be available to the legacy native apps?

创建Flutter组件后，如何将其用于旧版本机应用程序？

There are two options

有两种选择

A) Export the flutter component as aar or as a pod dependency

A)将flutter组件导出为aar或pod依赖项

B) Depend upon the flutter source code available as a dependency

B)依赖于依赖的flutter源代码

Obviously, except for some quick demo projects, we should choose option A.

显然，除了一些快速演示项目外，我们应该选择选项A。

How do we export a flutter component in Android?

我们如何在Android中导出颤动组件？

How do we export a flutter component in iOS?

我们如何在iOS中导出颤动组件？

As a CocoaPods dependency

作为CocoaPods依赖项

pod file example

pod文件示例

And runpod install in the terminal.

并在终端中运行pod install 。

在本机(主机)应用程序和Flutter组件之间传输数据 (Transfer of data between Native (Host) app and flutter components)

Now we understood how the integration of the flutter component works, you may have a question, how do I transfer the data from my legacy native app to the flutter component, vice versa?

现在，我们了解了Flutter组件的集成方式是如何工作的，您可能有一个疑问，如何将数据从旧版本机应用程序传输到Flutter组件，反之亦然？

Using Method Channel

使用方法通道

What is Method Channel?

什么是方法通道？

Method Channel is the medium that enables the data transfer between the host (platform) to the flutter component.

方法通道是使主机(平台)与颤振组件之间能够进行数据传输的介质。

On the Android side MethodChannel Android (API) and on the iOS side FlutterMessageChannel (API) is used for receiving method calls and sending back results.

在Android端，MethodChannel Android(API)和iOS端，FlutterMessageChannel(API)用于接收方法调用和发送回结果。

You should declare the method channel with an identifier in the Flutter component and initialize the method channel as below

您应该在Flutter组件中声明带有标识符的方法通道，并按如下所示初始化方法通道

How does the handle method look like?

handle方法的外观如何？

You can decode the call.agruments to retrieve the JSON data if any. If your flutter class is stateful, you can set the state, if needed.

您可以解码call.agruments来检索JSON数据(如果有)。 如果flutter类是有状态的，则可以根据需要设置状态。

Data transfer in reverse direction?

数据传输方向相反？

Method calls can also be sent in the reverse direction, with the flutter component as the source and the host as the destination.

方法调用也可以反向发送，以flutter组件作为源，将主机作为目标。

In the flutter component, call the invokeMethod with the method name and the message need to be passed.

在flutter组件中，使用方法名称和需要传递的消息来调用invokeMethod。

In the Android / iOS Component, capture the message using the channel.setMethodHandler

在Android / iOS组件中，使用channel.setMethodHandler捕获消息

Now we have learned so far, how we can invoke the flutter components from the native app and pass data between the native app to the flutter component. We also learned how to pass data back from the flutter component to the native app.

到目前为止，我们已经了解了如何从本机应用程序调用flutter组件并将数据在本机应用程序之间传递到flutter组件。 我们还学习了如何将数据从flutter组件传递回本机应用程序。

In the next post, we will take an existing android app and embed a flutter component.

在下一篇文章中，我们将使用一个现有的android应用程序并嵌入一个flutter组件。

翻译自: https://medium.com/@kmmraj/how-to-introduce-flutter-in-legacy-native-apps-bbbe021b1045

app 引入h5 页面抖动