Отзывчивая плоская панель в react-360

Я хотел бы сделать адаптивную плоскую панель - на мобильном устройстве она должна быть в полноэкранном режиме, как здесь https://tour.croptrust.org/ image

Есть ли возможность добиться этого в react-360.

Вот мой пример https://gstuczynski.com/tour/plaszow/ — попробуйте нажать на лупу -> на рабочем столе выглядит хорошо, но как сделать его отзывчивым? Вот мой код https://github.com/gstuczynski/plaszow-cc-virtual-tour


react-native reactjs react-360
person tyskocz    schedule 10.12.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если вы хотите установить размер поверхности в зависимости от того, находится ли пользователь на мобильном или настольном компьютере, я бы подошел к этому, создав 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,
      });
    }

В вашем случае у вас уже есть vars для поверхностей, но удалите const, чтобы показать их вашему 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);

Затем создайте свой класс 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 запустите функцию для проверки и настройки размеров поверхности.

С этой настройкой вам нужно будет вызвать функцию для каждой поверхности, которую вы хотите проверить, или вы можете переработать, чтобы отправить несколько ссылок и выполнить 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 для включения обратного вызова.

person Ottosan    schedule 11.12.2019