跳至主内容

React Native 正式登陆 Meta Quest

· 1 分钟阅读
Łukasz Chludziński
Łukasz Chludziński
Engineering Manager @ Callstack
Jan Jaworski
Jan Jaworski
Software Engineer @ Callstack
Markus Leyendecker
Markus Leyendecker
Product Manager @ Meta
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

React Native 始终致力于帮助开发者实现跨平台知识复用。从最初的 Android 和 iOS 出发,我们逐步扩展到 Apple TV、Windows、macOS 平台,甚至通过 react-strict-dom 支持 Web 开发。2021 年发布的《多平台愿景》文章描绘了 React Native 的未来图景:在不分裂生态系统的前提下,适配新型设备和形态因子。

在 React Conf 2025 大会上,我们通过宣布 React Native 官方支持 Meta Quest 设备向该愿景迈出了新步伐。本文将重点介绍如何在 Meta Quest 上开始使用 React Native,当前支持的功能特性,以及开发者如何利用熟悉的工具和模式构建并发布 VR 应用。

重点详解

Meta Quest 上的 React Native

React Native app running on Meta Quest headset

React Native apps running on Meta Quest.

Meta Quest 设备运行基于 Android 的 Meta Horizon OS 操作系统。从 React Native 视角来看,这意味着所有现有 Android 工具链、构建系统和调试工作流只需最小改动即可使用。对于已在 Android 平台开发 React Native 应用的开发者,大部分现有开发模型可直接沿用。

这与 React Native 向其他 Android 环境扩展的历程保持一致。Meta Quest 并非引入新运行时或开发模型,而是基于相同的 Android 基础架构,并与 React Native 现有抽象层集成。这种模式能够在添加平台特定能力的同时,避免框架生态分裂或要求独立的开发方案。

Meta Quest 开发入门

本节将引导您完成 Meta Quest 的基本开发工作流,从使用 Expo Go 开始,逐步过渡到开发构建和平台特定配置。

逐步指南:在 Meta Quest 上运行 Expo 应用

要在 Meta Quest 上运行 Expo 应用,请启动标准 Expo 项目,运行开发服务器,并通过头戴设备上的 Expo Go 打开应用。除少量 Meta Horizon OS 特定要求外,工作流与 Android 平台完全一致。

  1. 在头戴设备安装 Expo Go

    Expo Go 已在 Meta Horizon 商店上架,可直接在 Meta Quest 设备安装。该工具用于开发期间的快速迭代。

  2. 创建(或使用)Expo 项目

    若需新建项目,请创建标准 Expo 应用,无需特殊模板。

    npx create-expo-app@latest my-quest-app
    cd my-quest-app
  3. 启动开发服务器

    npx expo start
  4. 通过 Expo Go 连接 Quest 设备

    在头戴设备打开 Expo Go,使用设备摄像头扫描 Expo CLI 显示的二维码。应用将在设备新窗口中启动,支持实时重载和快速迭代。

  5. 按常规流程迭代

    代码变更将立即反映在设备上,遵循与 Android 和 iOS 相同的编辑-刷新循环。

开发构建与原生功能

Expo Go 在早期开发和界面设计阶段完全够用。当需要接入原生模块或更深度的平台集成时,则需改用开发构建。这些构建遵循标准的 Expo 开发构建流程,并直接在 Quest 设备上运行。

平台专属配置与移动端差异

尽管整体工作流保持一致,但 Meta Quest 需要少量平台专属调整。

Meta Horizon OS 项目配置

Meta Quest 应用必须满足特定要求才能正常运行并符合应用商店上架资格,包括平台专属的 Android 配置、产品变体(flavor)和应用元数据。

Expo 为 Meta Horizon OS 提供了自动化插件,可在构建时应用这些要求。使用该插件能确保项目配置符合 Meta Quest 规范,无需手动修改原生文件。

安装 expo-horizon-core 并添加到 app.jsonapp.config.js

{
"expo": {
"plugins": [
[
"expo-horizon-core",
{
"horizonAppId": "your-horizon-app-id",
"defaultHeight": "640dp",
"defaultWidth": "1024dp",
"supportedDevices": "quest2|quest3|quest3s",
"disableVrHeadtracking": false,
"allowBackup": false
}
]
]
}
}

同时修改屏幕方向设置:

{
...
"orientation": "default",
...
}

package.json 中添加 Quest 专属脚本:

{
"scripts": {
"android": "expo run:android --variant mobileDebug",
"quest": "expo run:android --variant questDebug",
"android:release": "expo run:android --variant mobileRelease",
"quest:release": "expo run:android --variant questRelease"
}
}

脱离 Expo 使用 React Native

Expo 是在 Meta Quest 上使用 React Native 的最便捷方式。若倾向不使用框架,也可直接在 Android 项目中应用必需的 Meta Horizon OS 配置。

至少需完成以下步骤:

  • android/app/build.gradle 中创建 Meta Quest 专属构建变体(flavor)

  • 设置 horizonAppId

  • 在 Android 清单中定义默认面板尺寸

  • 声明支持的设备型号(例如:quest2|quest3|quest3s

  • 移除被禁止的权限

  • 调整最低支持的 Android SDK 版本

  • 添加运行时检测如 isHorizonDevice()isHorizonBuild()

完整配置变更可参考 expo-horizon-core 插件实现进行手动复现。

无 Google Play 服务的 Android 环境

Meta Horizon OS 基于 Android 开源项目(AOSP)构建,提供核心 Android 平台但不包含 Google 专有服务。这意味着应用运行在标准 Android API 上,但无法使用 Google 移动服务(如 Play 服务或应用商店专属集成)。

针对 Meta Quest 开发时,应用应避免直接依赖 Google 服务,或按需提供平台专属替代方案。

不受支持的依赖项列表详见 Meta Horizon OS 文档

权限与设备能力限制

移动设备常见的部分 Android 权限和硬件假设在 VR 头显中不适用。蜂窝功能(如短信)、特定传感器(如 GPS)以及受限权限均不可用或被禁止。项目必须在配置阶段明确处理这些差异。

评估第三方库兼容性

多数 React Native 库可在 Meta Quest 上运行,但兼容性取决于库对底层平台的假设。尤其需注意依赖移动端专属硬件、触摸输入或Horizon OS 不支持服务的库。

通用评估准则:

  • 自包含且仅依赖标准 React Native/Android API 的库通常无需修改即可运行

  • 假设仅支持触摸输入/移动端硬件/Google 移动服务的库需要适配或条件化使用

  • 依赖受限权限或不可用设备能力的库不受支持

对于某些常见用例,例如定位通知,Expo 提供了针对 Meta Horizon OS 的即插即用替代方案。其他库可能可以直接使用,或者根据其依赖关系需要特定于平台的处理。

平台感知代码路径

同时针对 Meta Quest 和其他平台的应用应保护特定于平台的行为。Meta Horizon OS 提供了运行时工具来检测应用是否在 Quest 设备上运行,从而在必要时禁用或替换不支持的功能。

import ExpoHorizon from 'expo-horizon-core';

// Check if running on a Horizon device
if (ExpoHorizon.isHorizonDevice) {
console.log('Running on Meta Horizon OS!');
}

// Check if this is a Horizon build
if (ExpoHorizon.isHorizonBuild) {
console.log('This is a Horizon build variant');
}

// Access the Horizon App ID
const appId = ExpoHorizon.horizonAppId;
console.log('Horizon App ID:', appId ?? 'Not configured');

VR 设计和用户体验考量

为头戴式显示器设计引入了与基于触摸的移动设备不同的约束。界面在远处观看,在空间中渲染,并使用更广泛的输入方法进行交互。

UI 元素通常需要更大的点击目标、增加的间距以及在不同距离下保持可读性的排版。这些挑战与在桌面、平板和可折叠设备上遇到的类似,这些设备上的应用在可调整大小的窗口中运行,布局必须动态适应。

Meta Quest 与 Android 移动设备之间的一个主要区别是输入方式。Meta Quest 应用通常通过控制器、手势追踪以及可选的鼠标和键盘来控制,而不是主要依赖触摸。控制器的行为更像指针设备,这引入了更接近 Web 和桌面 UI 的交互模式,包括悬停和基于焦点的导航。

React Native 的事件系统和组件模型可以支持这些交互模式,但应用应避免仅考虑触摸的假设,并确保 UI 元素在通过指针设备控制时提供清晰的焦点状态和可预测的导航。

这些考量共同支持响应式布局和与输入无关的交互。React Native 的布局系统和组件模型为构建舒适且可用的 VR 界面提供了坚实的基础。

备注

更多详情,请查阅官方设计指南

示例和参考

参考项目

了解更多

致谢

将 React Native 引入新平台需要的不仅仅是代码。我们感谢所有在此过程中贡献时间、提供反馈和支持的人。