Question

我正在使用 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 中不起作用，并且无法解决该问题。任何帮助是极大的赞赏。

Answer 1

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

const vr = new VRInstance(bundle, 'Basics', parent, {
// Add custom options here
...options,
// Register dom overlay module upon initialization.
nativeModules: [domOverlayModule],
 });

无法使用ReactVr从NativeModules中读取未定义的属性'openOverlay'

1 个答案: