使用 visionOS 开发

Apple 提供了从 visionOS 开始的开发，并使用 Xcode 15.2 或更高版本。

创建 visionOS 项目 ​

您可以使用插入的物理 Vision Pro 或使用 Vision Pro 模拟器进行开发。

您将需要 vision CLI:

npm install -g nativescript@vision

现在，您可以在创建应用程序时使用 --vision（或 --visionos）标志。

ns create myapp --vision

这将使用纯 TypeScript 基础设置一个预配置的 visionOS 就绪应用程序。

如果您更喜欢某种风格，可以使用以下任何一种

• Angular: ns create myapp --vision-ng
• React: ns create myapp --vision-react
• Solid: ns create myapp --vision-solid
• Svelte: ns create myapp --vision-svelte
• Vue (3.x): ns create myapp --vision-vue

所有项目都预先配置了 tailwindcss。

运行您的 visionOS 项目 ​

打开 Vision Pro 模拟器，然后使用以下命令运行您的应用程序

ns run vision --no-hmr

vision 平台目标是 visionos 的简写别名，因此也可以使用它

ns run visionos --no-hmr

使用物理 Vision Pro 开发 ​

您可以使用 开发者腕带将您的 Vision Pro 连接到 Mac。

开发者腕带是一种可选配件，可在 Apple Vision Pro 和 Mac 之间提供 USB-C 连接，有助于加快图形密集型应用程序和游戏的开发。开发者腕带提供与包装盒内的右侧音频腕带相同的音频体验，因此开发人员可以将开发者腕带始终连接以进行开发和测试。

连接后，您可以运行 ns device 列出所有连接的物理设备

% ns device
Searching for devices...

 Connected devices & emulators
┌───┬──────────────────┬──────────┬───────────────────────────┬────────┬───────────┬─────────────────┐
│ # │ Device Name      │ Platform │ Device Identifier         │ Type   │ Status    │ Connection Type │
│ 1 │ Apple Vision Pro │ visionOS │ 00008112-001A10812278A01E │ Device │ Connected │ USB             │

然后，您可以按如下方式在该设备上运行

ns run visionos --no-hmr --device=00008112-001A10812278A01E

是什么让项目在 visionOS 上运行？ ​

主要有两个关键元素构成了 NativeScript 驱动的 visionOS 项目

1. App_Resources/visionOS/src/NativeScriptApp.swift
2. 以下依赖项

{
  "dependencies": {
    "@nativescript/core": "vision"
  },
  "devDependencies": {
    "@nativescript/visionos": "~8.6.0",
    "@nativescript/webpack": "vision"
  }
}

设计指南和说明 ​

我们强烈建议开发人员了解并使用 Apple 的系统玻璃材质贯穿其应用程序，并严格遵循其设计指南。

我们建议观看以下涵盖 visionOS 的 WWDC 2023 视频，以获得基本理解

• 为空间用户界面设计
• 视觉和运动的设计注意事项
• 了解适用于空间计算的 UIKit
• 创建可访问的空间体验
• 探索沉浸式声音设计
• 交付适用于空间体验的视频内容
• 创造出色的空间播放体验

您可能对此更感兴趣 这里。

visionOS 的 CSS 调整 ​

您可能希望通过使用此 CSS 说明符使您的页面透明，以允许自然玻璃材质透过来

.ns-visionos Page {
  background-color: transparent;
}

在 visionOS 上运行应用程序时，您可以通过根级 .ns-visionos 类根据需要对 CSS 选择器进行范围限定。

visionOS 材质的悬停效果 ​

所有标准/系统 UI 组件用法（如按钮、开关、选择器等）都将在 visionOS 上自动获得系统悬停样式效果。

通常在 NativeScript 中向 StackLayout、GridLayout 等添加 tap 绑定，它们只是 UIView。

您可以使用新的 @nativescript/core API 轻松地在整个应用程序中的任何视图类型上启用 visionOS 悬停样式或自定义每个视图。

Apple 在 此会议中讨论了这些效果的一些重要空间注意事项。

每个视图都可以指定它自己的自定义 hoverStyle，如下所示

<GridLayout hoverStyle="{{customHoverStyle}}" tap="{{tapAction}}"/>

hoverStyle 属性可以定义为 string 或 VisionHoverOptions。

import { VisionHoverOptions } from '@nativescript/core'

const hoverStyle: VisionHoverOptions = {
  effect: 'highlight',
  shape: 'rect',
  shapeCornerRadius: 16,
}

当检测到悬停时，这会将 visionOS 系统突出显示矩形（带 16 的圆角）应用于该 GridLayout。

选项如下

export type VisionHoverEffect = 'automatic' | 'highlight' | 'lift'
export type VisionHoverShape = 'circle' | 'rect'
export type VisionHoverOptions = {
  effect: VisionHoverEffect
  shape?: VisionHoverShape
  shapeCornerRadius?: number
}

当提供 string 时，它将在 TouchManager.visionHoverOptions 中查找与字符串名称匹配的预定义 hoverStyle。这允许您预定义并在整个应用程序中共享自定义 hoverStyle。

您可以通过启用以下内容在整个应用程序中为任何具有 tap 绑定的视图全局启用这些效果

TouchManager.enableGlobalHoverWhereTap = true

这允许您预定义任意数量的自定义 hoverStyle，您可以在整个应用程序中使用它们。例如，您可以在 app.ts 或 main.ts（即引导文件）中执行此操作

TouchManager.enableGlobalHoverWhereTap = true
TouchManager.visionHoverOptions = {
  default: {
    effect: 'highlight',
    shape: 'rect',
    shapeCornerRadius: 16,
  },
  slimBox: {
    effect: 'lift',
    shape: 'rect',
    shapeCornerRadius: 8,
  },
  round: {
    effect: 'lift',
    shape: 'circle',
  },
}

然后，您可以按名称在应用程序中的任何位置应用自定义 hoverStyle。

<GridLayout hoverStyle="default" tap="tapAction"/>
<GridLayout hoverStyle="slimBox" tap="tapAction"/>
<GridLayout hoverStyle="round" tap="tapAction"/>

如果需要，您还可以通过添加 visionIgnoreHoverStyle 属性来禁用任何视图上的 hoverStyle。

视图模板 visionOS 范围限定 ​

您还可以根据需要专门为 visionOS 布局对视图模板的部分进行范围限定

<visionos>
    <Label>I only show on visionOS</Label>
</visionos>
<ios>
    <Label>I only show on iOS</Label>
</ios>
<android>
    <Label>I only show on Android</Label>
</android>

NativeScript 和 SwiftUI 应用程序生命周期 ​

从 NativeScript 8.6 开始，我们首次支持 SwiftUI App 生命周期。为了更好地了解 SwiftUI 应用程序生命周期，我们推荐以下文章

• https://peterfriese.dev/posts/ultimate-guide-to-swiftui2-application-lifecycle/
• https://dev.to/sam_programiz/swiftui-app-life-cycle-2n68

我们如何告诉编译器我们应用程序的入口点？

从历史上看，对于 NativeScript 应用程序，我们将使用 Objective C 主入口来定义初始化 NativeScript 引擎并启动应用程序的入口点。

我们现在还通过单个 App_Resources/visionOS/src/NativeScriptApp.swift 文件支持 SwiftUI @main 入口

import SwiftUI

@main
struct NativeScriptApp: App {

    var body: some Scene {
        NativeScriptMainWindow()
    }
}

NativeScriptMainWindow 是一个 SwiftUI WindowGroup，它返回一个 Scene，即您的 NativeScript 应用程序。在 visionOS 应用程序中，您可以扩展此 struct 以支持新的 Scene 和 Space，以及新的和令人兴奋的窗口样式，如 volumetric 以及 Immersive Space。

NativeScriptMainWindow 是一个 SwiftUI struct，它本身表示一个 Scene，如下所示

struct NativeScriptMainWindow: Scene {
    var body: some Scene {
        WindowGroup {
            NativeScriptAppView(found: { windowScene in
                NativeScriptEmbedder.sharedInstance().setWindowScene(windowScene)
            }).onAppear {
                // Your app is booted here!
                DispatchQueue.main.async {
                    NativeScriptStart.boot()
                }
            }
        }
        .windowStyle(.plain)
    }

    init() {
        // NativeScript engine is configured here!
        NativeScriptEmbedder.sharedInstance().setDelegate(NativeScriptViewRegistry.shared)
        NativeScriptStart.setup()
    }
}

支持多个窗口 ​

为了添加体积和沉浸式空间，请确保您将以下设置添加到 App_Resources/visionOS/Info.plist 中

<key>UIApplicationSceneManifest</key>
<dict>
    <key>UIApplicationSupportsMultipleScenes</key>
    <true/>
</dict>

下一步是什么？ ​

超越现有可能，创新的可能性令人兴奋，这标志着一个全新世界的开始。@nativescript/core 以及第三方插件可以提供更多 SwiftUI 提供程序，从而实现新的强大开发工作流。

随着时间的推移，我们将开始分享更多关于扩展您的 visionOS 应用以支持体积窗口和沉浸式空间的详细信息，同时您也可以探索现有的可能性。

您可以在以下“Vision Pro 🥽 Hello World”教程中学习：

• 使用 TypeScript 开发 Vision Pro 🥽 应用
• 使用 Angular 开发 Vision Pro 🥽 应用
• 使用 React 开发 Vision Pro 🥽 应用
• 使用 Solid 开发 Vision Pro 🥽 应用
• 使用 Svelte 开发 Vision Pro 🥽 应用
• 使用 Vue 开发 Vision Pro 🥽 应用