如何基于visionOS SDK在Apple Vision Pro上运行React Native项目？

前置条件 #

• 运行macOS Sonoma 14.3+的Mac设备，安装Xcode 15.2+（需包含visionOS SDK）
• React Native版本0.73及以上（对visionOS支持更完善），已安装React Native CLI或Expo CLI
• 拥有激活的Apple Developer账号，并开通visionOS开发权限

新建支持visionOS的React Native项目 #

1. 初始化项目：

   npx react-native init VisionRNApp --version 0.73.0
   

2. 打开Xcode项目：进入ios目录，打开VisionRNApp.xcworkspace
3. 添加visionOS Target：
   • 点击菜单栏File > New > Target
   • 在弹出窗口中选择visionOS > App，点击Next
   • 填写Target名称、符合开发者规范的Bundle ID，完成创建
4. 关联React Native依赖：
   在新创建的visionOS Target的Frameworks, Libraries, and Embedded Content中，添加libReact.a、libReactNative.a等核心React Native库

适配现有React Native项目 #

1. 升级React Native版本：

   npm install react-native@latest
   cd ios && pod install && cd ..
   

2. 重复「新建项目」中的步骤3-4，添加并配置visionOS Target
3. 调整Build Settings：
   选中visionOS Target，在Build Settings中设置：
   • Base SDK：visionOS
   • Deployment Target：visionOS 1.0+
4. 适配第三方依赖：检查项目中所有第三方库是否支持visionOS，不支持的需替换或修改源码适配

运行与调试 #

1. 连接设备：将Apple Vision Pro连接到Mac，或启动visionOS模拟器
2. 运行项目：在Xcode中选中visionOS Target，点击Run按钮（或使用快捷键Cmd+R）
3. 信任证书：首次运行时，在Vision Pro的设置 > 通用 > VPN与设备管理中，找到你的开发者账号并信任
4. 调试JS代码：在Vision Pro上通过摇动手势唤起开发者菜单，选择Debug JS Remotely，即可在浏览器中调试
5. 原生调试：使用Xcode断点调试RN与visionOS交互的原生代码

注意事项 #

• visionOS的空间交互（手势、眼动追踪）需额外适配，可借助社区库react-native-visionos扩展组件能力
• 测试时需关注UI的空间布局，避免元素超出视野范围

内容的提问来源于stack exchange，提问作者Gabriel Donadel Dall'Agnol