react-360中的响应式平板
react-360中的响应式平板
提问于 2019-12-11 02:27:49
我想要做出响应式的平板--在移动设备上应该是全屏的，就像那里的https://tour.croptrust.org/
有没有可能在react-360中实现这一点。
这是我的示例https://gstuczynski.com/tour/plaszow/ -尝试点击->在桌面上看起来很好，但如何使其响应？下面是我的代码https://github.com/gstuczynski/plaszow-cc-virtual-tour
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-11 20:43:53
如果你想根据用户是在移动设备上还是在桌面上设置你的表面大小，我会通过构建一个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中，运行该函数来检查和调整表面大小。
使用此设置时，您需要为每个想要检查的Surface调用函数，或者您可以修改以发送多个refs并执行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以包含回调
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59273339
复制相关文章
相似问题
腾讯云开发者
