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