React Native宣布适用于苹果Vision Pro

简述

React Native 现在已经在苹果Vision Pro 上可用，为开发者解锁了该平台的全部潜力。与兼容模式不同，这种方法可以在visionOS上实现沉浸式体验和 XR 功能。包括调整代码以适配 visionOS 的特定要求，并克服模拟器的限制。开发者可以尝试使用React Native Community CLI创建空间应用，并对这个不断发展的项目提供反馈。

简介

苹果Vision Pro于2023年6月5日宣布推出，我们随即开始考虑如何在其上运行React Native。
经过几个月的艰苦工作，我们成功了！

你可能在visionOS开发者SDK发布后的第一天就看到了很多React Native应用在苹果Vision Pro上运行，但它们实际上是运行在所谓的兼容模式下。这种模式允许你将你的应用编译为目标iPad设备，并在visionOS上使用。

然而，这种方法非常限制。你可以将其视为在macOS上运行iOS应用（使用相同的“为iPad设计”的兼容层），在这种情况下，应用开发者无法访问通过AppKit（macOS上使用的UI框架）暴露出的任何本地macOS API。

将React Native引入到visionOS的主要目标是允许开发者充分利用这个平台的潜力。兼容模式只能在React Native visionOS上渲染出漂浮在空间中的无聊矩形，而真正的React Native visionOS则可以利用沉浸式空间、体积型窗口，并创建超越应用边界的XR体验。

我们是如何做到的？

我们与Rebecker Specialties的Matt Hargett合作，帮助他们开发了他们的第一个空间React Native应用。然而，在发布任何应用之前，我们需要迁移框架（以及一些第三方库）。以下是我们如何做到的简要说明：

React Native visionOS是一个独立的平台，实质上是React Native核心的一个分支，扩展了它在新平台上的可能性。这样的项目示例包括React Native Windows、React Native macOS和React Native tvOS。

将这一切带到一个尚未发布的平台上是一个相当大的挑战，因为许多必要的构建工具尚不可用。例如，CocoaPods，一个用于iOS的本地依赖管理器，它被React Native广泛使用，但却不可用（特别感谢Gabriel Donadel为Cocoapods添加了visionOS支持）。

为苹果平台创建一个独立的分支主要是基于在不支持该平台上的代码周围添加编译条件。例如，许多API在visionOS上没有逻辑等效物，例如：在你的应用上方没有状态栏，因此所有负责控制外观和行为的代码都必须隐藏在一个#if语句后面，否则它将无法编译。

这里是一个例子：

#if !TARGET_OS_VISION
// 不受支持的代码
#endif

我们遇到的最显著的问题之一是React Native在本地端检索其主视图尺寸信息的方式。对于大多数移动设备来说，假设我们在iOS上运行应用时只有一个屏幕是可以的，因此我们可以调用[UIScreen mainScreen].bounds来获取主屏幕的宽度和高度。

然而，在visionOS上，应用启动到一个“共享空间”，每个应用都放置在彼此旁边的空间中，我们无法通过引用设备的主屏幕来检索窗口的高度和宽度。因此，我们需要重写大部分与检索屏幕尺寸相关的逻辑，并且提交代码给React Native主项目。

这里是上述共享空间的示例：

另外，我们在进行这项工作时缺少一个关键组件，那就是实际的设备！因此，所有的工作都完全在苹果Vision Pro模拟器上完成。我们期待很快在苹果的头戴式显示器上进行测试 🥽

要了解将React Native引入到visionOS的挑战的完整故事，请收听我们最近的播客：

创建你的第一个React Native空间应用

先决条件：

Xcode 15.2+
visionOS模拟器运行时
CMake 3.28.0+
`不需要Apple Vision Pro！（你可以使用模拟器）`

要创建一个新项目，你可以使用React Native Community CLI：

npx @callstack/react-native-visionos@latest init MySpatialApp

这将从visionOS模板创建一个新项目。一旦你进入项目目录，你将看到一个名为visionos的新文件夹，它在ios文件夹旁边。

首先，在visionos文件夹内安装Cocoapods：

bundle install && bundle exec pod install

安装完成后，你可以通过运行（xed visionos）来在Xcode中打开项目，或者使用内置的CLI命令：

yarn visionos

应用启动后，你应该会看到“欢迎来到React Native visionOS”：

查看React Native visionOS的最新版本（v0.73）。

总结

我们鼓励你尝试一下React Native对visionOS的支持，并告诉我们你的想法。请注意，这个项目仍处于早期阶段，可能会有一些不完善之处。我们正在积极努力引入新的visionOS特定API，以便你可以创建功能丰富的空间应用，支持多窗口和空间体验。你可以在我们的下一篇博客文章中了解更多相关内容。

原文：https://www.callstack.com/blog/announcing-react-native-for-apple-vision-pro