0

我正在使用reactVr构建一个项目，并在其中使用 DOM 元素时遇到问题。我从 facebook 的 github 上的DomoverlaySample中遵循了这个例子，结果遇到了一个问题。基本上，在我的 index.vr.js 中，我调用了 Monitor.js，我想将其渲染为2D图像。

import Monitor from './Monitor';

export default class Basics extends Component {
  render() {
    return (
      <View>
        <Pano source={asset('office.jpg')}/>
        <Monitor />
        <Printer />
        <TryIframe />
      </View>
    );
  }
}

在我的Monitor.js中，我复制并粘贴了代码。

import React from 'react'
import {
    Image,
    View,
    asset,
    NativeModules,
    VrButton,
    Text,
    Model,
    VrHeadModel,
    StyleSheet
} from 'react-vr'

import TextboxVr from './TextboxVr'; //calling from parent directory;

const domTextboxContent = {
  header: "Test Header",
  description: "The description goes here with. test description"
}

const vrTextboxContent = "DOM elements couldn't be loaded because your browser doesn't support DOM elements. ";

export default class Monitor extends React.Component {
  constructor(){
    super()

    this.state = {
      renderVrTextbox: false,

      //infoText: false //setting the textField as false which will not display the box
    }
    this._toggleDisplay = this.toggleDisplay.bind(this);
  }

  toggleDisplay() {
      if (VrHeadModel.inVR()) {
        this.setState({renderVrTextbox: !this.state.renderVrTextbox});
      } else {
        // Not in VR, so let's use the dom overlay!
        NativeModules.DomOverlayModule.openOverlay(domTextboxContent);
      }
    }

  render() {
    return (
      <View >
          <View style={styles.triggerContainer}>
            <VrButton onClick={this._toggleDisplay}>
            <Image
              source={asset('infoButton.png')}
              style={styles.imageView}></Image>
              </VrButton>
          </View>
            {this.state.renderVrTextbox && <TextboxVr text={vrTextboxContent} />}
      </View>
    )
  }
}
//.. some styleSheet goes here .. //  

module.exports = Monitor;

每当我尝试运行代码时，它都会向我抛出一个openOverlay()未定义的错误，而openOverlay()在DomOverlayModule.js. 我假设 NativeModule 在Monitor.js中不起作用，我无法解决这个问题。任何帮助是极大的赞赏。

4

1 回答 1

0

我在这里发布我自己的答案。我错过了从client.jsto的桥梁，DomOverlayModule.js所以我nativeModules: [domOverlayModule]在 client.js 中添加了这个，它可以在这个链接中找到。我能够一遍又一遍地使用 TextBoxOverlay.js 类。下面是代码：

const vr = new VRInstance(bundle, 'Basics', parent, {
// Add custom options here
...options,
// Register dom overlay module upon initialization.
nativeModules: [domOverlayModule],
 });
于 2018-09-01T03:22:44.547 回答