概述

Viro React 是一个供开发人员快速构建增强现实 (AR) 和虚拟现实 (VR) 体验的平台。开发人员使用 React Native 编写代码，Viro 在所有移动 VR（包括 Google Daydream、Samsung Gear VR 以及适用于 iOS 和 Android 的 Google Cardboard）和 AR（iOS ARKit 和 Android ARCore）平台上本地运行他们的代码。

使用 Testbed 应用程序运行示例项目的说明：

1. 按照我们的快速入门指南中的说明设置依赖项，以便使用 Viro Media App 尝试这些示例项目。
2. 使用 git: 将 repo 克隆到你的工作区git clone https://github.com/viromedia/viro.git。
3. 进入代码示例目录。
4. npm install从此项目的根目录运行

5. [hidecontent type="logged" desc="隐藏内容：登录后可查看"]

   1. npm start从此项目的根目录运行。
   2. 打开 Viro Media 应用程序，滑出左侧面板并选择“进入测试平台”。
   3. 在终端顶部的文本字段中输入整个 ngrok URL 输出 (xxxxxx.ngrok.io)，然后点击“GO”
   4. 您现在应该在应用程序中！享受！

   将示例代码作为独立项目运行的说明（没有 Testbed 应用程序）：

   通过我们的 Testbed 应用程序试用了示例，现在想尝试将示例代码作为独立应用程序部署到您的设备吗？以下这些快速步骤应该可以帮助您入门：

   1. 按照上面的步骤 1 - 4（与 Testbed 应用程序一起使用的说明）
   2. 对于 Android，请确保您已从此处下载并安装 Android Studio以获取构建 Android 应用程序所需的 SDK 和平台工具确保您已设置所需的环境变量 -$ANDROID_HOME并将其添加platform-tools到$PATH变量中。如果不，

      export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
      export PATH=$ANDROID_HOME/platform-tools:$PATH
      export PATH=$ANDROID_HOME/tools:$PATH
      

      通过从项目的根目录执行以下命令来构建并启动 android 应用程序

      react-native run-android --variant=gvrDebug
      

   3. 对于 iOS，在 Xcode 中打开ViroSample.xcworkspace目录ios/。在 Hit play 下选择正确的“团队”ViroSample和ViroSampleTest目标，General -> Signing 以在您的 iOS 设备上构建和启动应用程序

   样本之间的变化

   1. 在文本编辑器中打开 App.js。
   2. 对于 AR，在第 44 行设置 showARScene=true。
   3. 对于 VR，修改第 61 行：修改为第 30 行字典scene: scenes['360 Photo Tour'],中定义的场景。scenes
   4. 重新加载/重新启动应用程序。

   使用来自 Mainline 的 CI 构建的 Viro React 平台的说明：

   您还可以尝试包含前沿功能和修复的最新主线版本。请记住，主线构建可能不如发布构建稳定。为此，只需：

   1. 转到此项目的Viro 操作工作流。
   2. 您应该会看到“Viro Bridge CI Pipeline”工作流列表。
   3. 单击最新成功构建的工作流管道（旁边应该是一个复选标记）。
   4. 下载最新构建的 ViroReact.tgz artiface。
   5. 使用 git: 将这个 repo 克隆到你的工作区git clone https://github.com/viromedia/viro.git。
   6. 进入代码示例目录。
   7. npm install从此项目的根目录运行。
   8. 删除从 npm 安装中拉下的 ViroReact 框架（您将使用预构建的框架）。
   9. npm 安装 ../path/to/your/downloadedArtifact.tgz

   手动搭建Viro React平台说明：

   构建 iOS Viro React：

   1. 按照我们的快速入门指南中的说明设置依赖项。
   2. 使用 git: 将 repo 克隆到你的工作区git clone https://github.com/viromedia/viro.git。
   3. 使用我们的Virocore存储库中概述的构建说明构建我们的 iOS 渲染器。
   4. 确认您看到文件夹中创建的新文件ios/dist。
   5. 在文件夹中安装 pod ios/：

      cd ios
      pod install
      

   6. 在测试文件夹中安装 node_modules：

      cd test
      npm install
      

   7. 在文件夹中安装 pod ViroExample：

      cd test/ios/ViroExample
      pod install
      

   8. 在 Xcode 中打开ViroExample.xcworkspace。（确保您打开的是 .xcworkpace 文件，而不是*.xcodeproj 文件！）
   9. 选择产品->方案。如果您没有看到React方案，请点击Manage Schemes...。在对话框中，添加React方案。
   10. 通过方案的构建配置（调试与发布）React，ViroReact并ViroExample确保它们都是发布或调试，具体取决于您要构建的内容。
   11. 就是这样！现在为 构建 React 方案Generic iOS Device，然后为同一目标构建 ViroReact 方案。笔记：

       11.a If you want the ability to run on Simulator, 
            change target to any of the `iOS Simulator` targets instead of `Generic iOS Device`. 
       11.b If in your own app project setup, you prefer to include Viro React as a static library 
            rather than relying on `use_frameworks!` - build scheme `ViroReact_static_lib` 
            instead of `ViroReact` as mentioned above in step #11. 
       

   12. libViroReact.a您应该在 处看到一个新文件ios/dist/lib/libViroReact.a。
   13. 要运行 Viro React 测试，请ViroExample在插入的 iOS 设备上运行方案。

   构建 Android Viro React：

   1. 在 viro 目录下，运行./prepareRelease.sh.
   2. 你的 android 桥现在应该在发布下构建。
   3. 你应该看到在 android/react_viro/react_viro-release.aar 创建了一个新文件
   4. 要构建 android 发布测试：

      $ cd test/android
      $ ./gradlew assembleGvrRelease
      

   5. 将 app-gvr-release.apk 安装到test/android/app/build/output/gvr/app-gvr-release.apk插入的 Android 设备上。

   将内置的 iOS 和 Android 捆绑并使用到单个 npm tar 包中：

   1. 您./prepareRelease.sh在上面运行的代码构建了 android react bridge 并将 iOS 和 Android bridge 捆绑到一个react-viro-*.tgz文件中。* 文件中的当前版本package.json

   示例代码：

   Figment AR（完整的开源应用程序）

   包含完整源代码的存储库，使用 ViroReact 和 React Native 为 Viro Media 获奖的 Figment AR App 构建。在Google Play和App Store上可用。

   在https://github.com/viromedia/figment-ar下载完整的源代码

   [/hidecontent]