React Native 登陆 Meta Quest(专业译文)

React Native 登陆 Meta Quest(专业译文)

原文:React Native Comes to Meta Quest

链接:reactnative.dev/blog/2026/0...

React Native 一直聚焦于帮助开发者在不同平台之间复用知识与能力。它最初支持 Android 和 iOS,随后逐步扩展到 Apple TV、Windows、macOS,甚至通过 react-strict-dom 覆盖 Web。2021 年发布的 Many Platform Vision 一文提出了一个方向:React Native 可以适配新的设备形态,而不必割裂生态。

在 React Conf 2025 上,团队沿着这一方向又迈进一步:正式宣布 React Native 官方支持 Meta Quest 设备。本文重点介绍如何在 Meta Quest 上开始 React Native 开发、当前可用能力,以及如何使用熟悉的工具链与开发模式构建并发布 VR 应用。

要点速览

  • React Native 在 Meta Quest 上的支持情况
  • 如何在 Meta Quest 上快速开始
  • Development Build 与原生能力接入
  • 平台特定配置及其与移动端差异
  • VR 场景下的设计与 UX 注意事项

React Native 在 Meta Quest 上

Meta Quest 设备运行的是 Meta Horizon OS(基于 Android)。从 React Native 的视角看,这意味着既有 Android 工具、构建系统和调试流程都可以在几乎不改动的前提下沿用。对已经在 Android 上开发 React Native 应用的团队来说,现有开发范式大部分都能直接迁移。

这与 React Native 过去扩展到其他 Android 生态环境的方式一致:不是引入一套全新的运行时或开发模型,而是复用 Android 基础能力并接入 React Native 既有抽象层。这样既能引入平台专属能力,也不会造成框架层面的割裂,开发流程也不需要重建。

在 Meta Quest 上快速开始

这一部分介绍 Meta Quest 的基础开发流程:先从 Expo Go 起步,再过渡到 Development Build 和平台特定配置。

分步操作:在 Meta Quest 上运行 Expo 应用

要在 Meta Quest 上运行 Expo 应用,流程是:创建标准 Expo 项目、启动开发服务器、再通过头显中的 Expo Go 打开应用。除少量 Meta Horizon OS 特定要求外,整体工作流与 Android 基本一致。

  1. 在头显中安装 Expo Go
    Expo Go 可从 Meta Horizon Store 获取,可直接安装在 Meta Quest 设备上,适合开发阶段快速迭代。

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

    如果从零开始,直接创建标准 Expo 应用即可,无需特殊模板。

sh 复制代码
npx create-expo-app@latest my-quest-app
cd my-quest-app
  1. 启动开发服务器
sh 复制代码
npx expo start
  1. 在 Quest 上通过 Expo Go 连接

    打开头显中的 Expo Go,使用头显摄像头扫描 Expo CLI 展示的二维码。应用会在设备中新窗口启动,支持 Live Reload,迭代速度与移动端开发体验一致。

  2. 按常规节奏迭代

    修改代码后可立即在设备端看到变化,遵循与 Android / iOS 相同的编辑-刷新循环。

Development Build 与原生能力

Expo Go 足以支持早期开发和 UI 调试。当你需要接入原生模块或更深的平台能力时,应切换到 Development Build。该构建方式沿用 Expo 的标准 Development Build 流程,并可直接在 Quest 设备上运行。

平台特定配置与移动端差异

虽然总体开发流程保持一致,但 Meta Quest 仍需要少量平台特定调整。

Meta Horizon OS 的项目配置

Meta Quest 应用要想正确运行并具备商店提审资格,必须满足一系列要求,包括 Android 平台特定配置、product flavor 以及应用元数据。

Expo 提供了面向 Meta Horizon OS 的插件,可在构建阶段自动应用这些要求,避免手工修改原生文件。

安装 expo-horizon-core,并在 app.jsonapp.config.js 中加入:

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

同时将方向配置改为:

json 复制代码
{
  "...": "...",
  "orientation": "default"
}

package.json 中新增 Quest 相关脚本:

json 复制代码
{
  "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 专用 build flavor
  • 设置 horizonAppId
  • 在 Android Manifest 中定义默认面板尺寸
  • 声明支持设备(如 quest2|quest3|quest3s
  • 移除被禁止的权限
  • 调整最低支持 Android SDK 版本
  • 增加运行时判断,例如 isHorizonDevice()isHorizonBuild()

如果要完整对齐配置,可查看 expo-horizon-core 插件实现,并在原生工程中等价落地。

无 Google Play Services 的 Android 环境

Meta Horizon OS 基于 AOSP(Android Open Source Project),提供 Android 核心平台能力,但不包含 Google 的专有服务。对开发者而言,这意味着应用运行在标准 Android API 上,但不能依赖 Play Services、Play Store 专属集成等 Google Mobile Services 能力。

因此,面向 Meta Quest 时,应避免对 Google 服务建立硬依赖,或提供平台特定替代方案。

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

权限与设备能力差异

移动设备上常见的一些 Android 权限和硬件假设不适用于 VR 头显。例如蜂窝网络能力(如 SMS)、某些传感器(如 GPS)以及受限权限可能不可用或被禁止。项目在配置阶段必须显式处理这些差异。

评估第三方库兼容性

大部分 React Native 库可在 Meta Quest 上工作,但兼容性取决于库对底层平台的假设。典型风险包括:依赖移动端专属硬件、仅面向触摸输入,或依赖 Horizon OS 不可用服务

通用判断原则:

  • 仅依赖标准 React Native / Android API 的自包含库:通常可直接使用。
  • 假设触摸输入、移动专属硬件或 Google Mobile Services 的库:需要适配或条件化接入。
  • 依赖受限权限或不可用设备能力的库:通常不受支持。

对于一些高频场景,如定位通知,Expo 已提供可替换方案。其他库则需按其依赖特征决定是否可直接使用或进行平台分支处理。

平台感知代码路径

同时面向 Meta Quest 与其他平台的应用,应对平台特定行为做保护分支。Meta Horizon OS 提供运行时工具用于判断当前是否运行在 Quest 设备,从而在必要时禁用或替换不支持能力。

js 复制代码
import ExpoHorizon from 'expo-horizon-core';

// 是否运行在 Horizon 设备
if (ExpoHorizon.isHorizonDevice) {
  console.log('Running on Meta Horizon OS!');
}

// 当前构建是否为 Horizon 变体
if (ExpoHorizon.isHorizonBuild) {
  console.log('This is a Horizon build variant');
}

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

VR 设计与 UX 考量

为头戴式显示设备设计界面,与触屏移动端有明显差异:界面通常在一定距离被观看、在空间中呈现,并通过更多输入方式交互。

因此 UI 通常需要更大的可命中区域、更充足的间距,以及在不同观看距离下仍具可读性的字体。这些问题与桌面、平板和折叠屏上的可变窗口场景有共性:布局必须具备更强响应式能力。

Meta Quest 与 Android 手机的核心差异之一在于输入方式:除触摸外,Quest 常通过控制器、手势追踪,且可选鼠标键盘。控制器行为更接近"指针设备",交互模式也更像 Web / 桌面,包括 hover 与基于 focus 的导航。

React Native 的事件系统与组件模型能够支持这些交互模式,但应用应避免"仅触摸"前提,并确保 UI 在指针控制下具备清晰 focus 状态与可预期导航行为。

综合来看,VR 更偏向"响应式布局 + 输入无关(input-agnostic)交互"的设计思路。React Native 的布局系统和组件模型为构建舒适、可用的 VR 界面提供了良好基础。

更多细则参见官方设计要求:Meta Horizon Design Requirements

示例与参考

参考项目

延伸阅读

致谢

将 React Native 带到新平台,远不止是代码层面的工作。感谢所有贡献时间、反馈与支持的同仁。

相关推荐
早點睡39018 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-collapsible
javascript·react native·react.js
哈__1 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-tts 语音播放
javascript·react native·react.js
早點睡3901 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-background-timer
javascript·react native·react.js
早點睡3901 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-shimmer-placeholder
javascript·react native·react.js
哈__1 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-splash-screen
javascript·react native·react.js
早點睡3902 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-orientation-locker
javascript·react native·react.js
早點睡3902 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-localize
javascript·react native·react.js
早點睡3902 天前
ReactNative项目OpenHarmony三方库集成实战:@react-native-community/slider
javascript·react native·react.js
早點睡3902 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-progress
javascript·react native·react.js