react-360 中的响应式平板

Question

我想制作响应式平板 - 在移动设备上应该像那里一样全屏显示 https://tour.croptrust.org/

有没有可能在 react-360 中实现。

这是我的示例 https://gstuczynski.com/tour/plaszow/ - 尝试点击放大镜 -> 在桌面上看起来不错，但如何使其响应？这是我的代码 https://github.com/gstuczynski/plaszow-cc-virtual-tour

Answer 1

如果您希望根据用户使用的是移动设备还是台式机来设置表面尺寸，我会通过构建一个 NativeModule 来检查设备是否在 componentDidMount() 并使用内置的 resize() 功能来调整表面尺寸。

首先在client.js

中添加一个模块

    function init(bundle, parent, options = {}) {
      const r360 = new ReactInstance(bundle, parent, {
        nativeModules: [
       //new module added here
       ctx => new SurfaceModule(ctx),
      ],
        fullScreen: true,
        ...options,
      });
    }

在你的情况下，你已经有了表面变量 - 但删除常量以将它们暴露给你的NativeModule：

infoPanel = new Surface(1440, 850, Surface.SurfaceShape.Flat);
mapPanel = new Surface(850, 800, Surface.SurfaceShape.Flat);
cylinderSurface = new Surface(4096, 720, Surface.SurfaceShape.Cylinder);

接下来，创建您的 class SurfaceModule 并包含一个函数来检查移动设备并包含表面名称的引用checkMobile(surfaceName)

        import {Module} from 'react-360-web';

        export default class SurfaceModule extends Module {
          constructor(ctx) {
            super('SurfaceModule');
            this._ctx = ctx;
          }

          checkMobile(surfaceName, id) {
              if (navigator.userAgent.match('add your match criteria here')) 
              {
                  let swidth = screen.width
                  let sheight = screen.height
                  surfaceName.resize(swidth, sheight);
                  this._ctx.invokeCallback(
                  id, 
                  [swidth, sheight] 
                 );
              }
          }

        }

最后在index.js 运行函数中检查和调整表面尺寸。

使用此设置，您需要为要检查的每个 Surface 调用该函数，或者您可以返工以发送多个引用并执行 if/switch

您也可以将调用从 componentDidMount() 移到另一个函数

import {
  NativeModules
} from 'react-360';

const SurfaceModule = NativeModules.SurfaceModule;
  componentDidMount() {
     SurfaceModule.checkMobile((swidth, sheight) => {
     console.log(swidth);
     console.log(sheight);
     });
  }

编辑：更新了 checkMobile() 函数和 index.js 以包含回调

react-360 中的响应式平板

Responsive flat panel in react-360

reactjs

react-native

react-360