使用 Capacitor 插件与 @nativescript/ionic-portals

Ionic Portals 允许您使用 Capacitor 插件。

让我们通过 @nativescript/ionic-portals 在 NativeScript 应用中使用 Capacitor 插件！

使用 Capacitor 插件

您可以在此处找到各种 Capacitor 插件的文档：https://capacitorjs.com/docs/plugins

例如，让我们使用以下插件

• 相机：https://capacitorjs.com/docs/apis/camera
• 文件系统：https://capacitorjs.com/docs/apis/filesystem
• 存储：https://capacitorjs.com/docs/apis/storage

iOS

对于 iOS，我们可以使用任何 Capacitor Cocoapod，如 Portals 文档中所述：https://ionic.io/docs/portals/how-to/using-a-capacitor-plugin

在您的 NativeScript 应用中

• App_Resources/iOS/Podfile（如果不存在，您可以添加此文件）

# Capacitor iOS Plugins
pod 'CapacitorCamera', '~> 1.3.0'
pod 'CapacitorFilesystem', '~> 1.1.0'
pod 'CapacitorStorage', '~> 1.2.0'

当使用任何需要用户权限同意的插件时，请确保您也遵守平台权限处理（通常使用 App_Resources/iOS/Info.plist 中的各种键/值），例如，如 CapacitorCamera 中所述。

官方 Capacitor iOS 插件在使用时会自动配置来自 @nativescript/ionic-portals。

Android

对于 Android，我们可以使用任何 Capacitor gradle 实现，如 Portals 文档中所述：https://ionic.io/docs/portals/how-to/using-a-capacitor-plugin

在您的 NativeScript 应用中

• App_Resources/Android/app.gradle（可以添加这些依赖项）

dependencies {
  // Capacitor Android Plugins
  implementation 'com.capacitorjs:camera:1.3.1'
  implementation 'com.capacitorjs:filesystem:1.1.0'
  implementation 'com.capacitorjs:storage:1.2.5'
}

当使用任何需要用户权限同意的插件时，请确保您也遵守平台权限处理（通常使用 AndroidManifest.xml 和其他资源文件中的各种设置），例如，如 com.capacitorjs:camera 中所述。

官方 Capacitor Android 插件在使用时会自动配置来自 @nativescript/ionic-portals。

使用非官方 Capacitor 插件

官方 Capacitor 插件列于此处，并且无需任何额外设置即可自动配置。

当使用 此处提到的 Capacitor 社区插件 和 此处找到的插件 时，它们在 iOS 上也会自动配置，但是对于 Android，您可能需要传入插件的完整包名称空间，例如

注意：仅适用于 Android 非官方 Capacitor 插件

import { IonicPortalManager } from '@nativescript/ionic-portals';

Application.on(Application.launchEvent, () => {
	// Register IonicPortals
	IonicPortalManager.register('<portal-api-key>');

	// Create as many Portals as you need to use in your app
  // For Android, you can pass array of any non-official capacitor plugin namespaces
	IonicPortalManager.create('ionicWebPortalSample', '', [
    'com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps'
  ]);
});

从您的 IonicPortal 使用

使用此 博文 作为在 NativeScript 应用中设置 IonicPortal 的指南，您现在可以使用任何您喜欢的 Capacitor 插件以及您计划插入 IonicPortal 的任何微前端。