8.7 版本发布—WinterCG 兼容性第一部分
了解更多

在 GitHub 上查看

@nativescript/flutter ​

通过在项目根目录下创建Flutter 模块，在 NativeScript 项目中使用 Flutter。

用法 ​

前提条件

1. 将 Flutter 添加到 NativeScript 应用 ​

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

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

bash
flutter create --template module flutter_views

注意：您可以从这个 flutter_views 文件夹内部运行 flutter run --debug 或 flutter build ios，就像任何普通的 Flutter 项目一样进行开发。

从Flutter 文档了解更多信息。

2. 配置您的 Dart 代码以具有命名入口点 ​

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

  • main.dart
ts
@pragma('vm:entry-point')
void myFlutterView() => runApp(const MyFlutterView());

3. 配置平台以供使用 ​

iOS ​

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

ruby
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

xml
<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 应包含以下内容

ts
android {
  // ...

  defaultConfig {
    // ...

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

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

ts
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 中时，都构建该模块

bash
cd flutter_views/.android

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

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

4. 安装 @nativescript/flutter ​

bash
npm install @nativescript/flutter

5. 在需要的地方使用 Flutter ​

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

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

// bootstrap app...

使用风味时，您只需注册要在标记中使用的元素即可

ts
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。

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

故障排除 ​

常见的故障排除技巧

Android ​

在运行 Android 之前，您需要先构建 Flutter 模块。否则，您可能会看到此错误

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

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

bash
cd flutter_views/.android

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

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

许可证 ​

Apache 许可证 2.0 版

下一页
地理位置