Невозможно прочитать свойство 'openOverlay' неопределенного из NativeModules, используя ReactVr - PullRequest
Новая
       10

Невозможно прочитать свойство 'openOverlay' неопределенного из NativeModules, используя ReactVr

0 голосов
/ 27 августа 2018

Я строю проект, используя ReactionVr , и столкнулся с проблемой при использовании в нем элементов DOM. Я последовал примеру из DomoverlaySample из github в Facebook и столкнулся с проблемой. По сути, в моем 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 , и я не могу решить эту проблему. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 01 сентября 2018

Я публикую здесь свой ответ. Мне не хватало моста от client.js до 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],
 });
...