@nativescript/flutter

通过在项目根目录创建一个Flutter 模块来将 Flutter 与 NativeScript 项目一起使用。

用法

先决条件

• 已安装 NativeScript
• 已安装 Flutter

1. 将 Flutter 添加到 NativeScript 应用

您可以在任何现有的 NativeScript 应用中使用 Flutter，或者通过使用 ns create 创建一个新的应用。

我们可以在项目目录的根目录创建一个 Flutter 模块

flutter create --template module flutter_views

注意: 您可以从 flutter_views 文件夹内部像任何正常的 Flutter 项目一样运行 flutter run --debug 或 flutter build ios 来开发它。

在此Flutter 文档中了解更多信息。

2. 配置 Dart 代码以使用命名入口点

命名入口点允许我们通过将入口点与视图 ID 匹配，在我们的 NativeScript 应用中使用不同的 Flutter 视图，例如：<Flutter id="myFlutterView" />

• main.dart

@pragma('vm:entry-point')
void myFlutterView() => runApp(const MyFlutterView());

3. 配置平台以使用

iOS

App_Resources/iOS/Podfile 应包含以下内容以引用我们的 Flutter 模块。

platform :ios, '14.0'

flutter_application_path = '../../flutter_views'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)

post_install do |installer|
    flutter_post_install(installer) if defined?(flutter_post_install)
end

将 Flutter 调试权限添加到 App_Resources/iOS/Info.plist

<key>NSLocalNetworkUsageDescription</key>
<string>Allow Flutter tools to debug your views.</string>
<key>NSBonjourServices</key>
<array>
  <string>_dartobservatory._tcp</string>
</array>

Android

App_Resources/Android/app.gradle 应包含以下内容

android {
  // ...

  defaultConfig {
    // ...

    // Add this section:
    ndk {
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }

App_Resources/Android/settings.gradle（如果需要，则创建文件）应包含以下内容

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()

def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}

plugins.each { name, path ->
  def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
  include ":$name"
  project(":$name").projectDir = pluginDirectory
}

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  // use the flutter module folder name you created here.
  // for example, a flutter module called 'flutter_views' exist at root of project
  '../flutter_views/.android/include_flutter.groovy'
))

在您希望看到 Dart 更改反映在 NativeScript 中的任何时候构建模块

cd flutter_views/.android

# This will build debug mode
./gradlew Flutter:assemble

# This will build release mode
./gradlew Flutter:assembleRelease

4. 安装 @nativescript/flutter

npm install @nativescript/flutter

5. 在任何需要的地方使用 Flutter

确保在引导应用之前初始化 Flutter 引擎，通常在 app.ts 或 main.ts

import { init } from '@nativescript/flutter';
init();

// bootstrap app...

当使用口味时，只需在您的标记中注册元素以供使用即可

import { Flutter } from '@nativescript/flutter'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('Flutter', () => Flutter)

// Solid
import { registerElement } from 'dominative';
registerElement('flutter', Flutter);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('flutter', () => Flutter);

// React
import { registerElement } from 'react-nativescript';
registerElement('flutter', () => Flutter);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('Flutter', () => Flutter)

任何地方都可以使用 Flutter。

<Flutter id="myFlutterView"></Flutter>

故障排除

常见的故障排除技巧

Android

在运行 Android 之前，您可能希望首先构建 flutter 模块。否则，您可能会看到以下错误

Transform's input file does not exist: flutter_views/.android/Flutter/build/intermediates/flutter/debug/libs.jar

您可以通过运行以下命令来修复

cd flutter_views/.android

# This will build debug mode
./gradlew Flutter:assemble

# This will build release mode
./gradlew Flutter:assembleRelease

许可证

Apache 许可证版本 2.0