无法使用 ReactVr 从本机模块读取未定义的属性"openOverlay"

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>
);
}
}

在我的监视器.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中定义的。我假设本机模块在监视器中不起作用.js并且我无法解决问题。任何帮助将不胜感激。

Answer 1

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

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