我正在使用 React 360 创建一个 VR 应用程序。我想要做的是最终创建一个应用程序,如此处Facebook VR 多表面示例所示。我正在使用该示例的代码,并尝试将其放入我的应用程序中。但是,我的 React 组件的以下初始化存在问题。
我有以下带有以下代码的 react-360 应用程序index.js
import React from 'react';
import connect from './Store';
import {
asset,
AppRegistry,
StyleSheet,
Text,
View,
VrButton,
} from 'react-360';
import Entity from 'Entity';
const ModelView = props => {
*********** Problem **************
Why are my props undefined if I am declaring it in the wrapper?
**********************************
return (
<Entity
style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
source={{obj: asset(`${props.planetName}.obj`), mtl: asset(`${props.planetName}.mtl`)}}
/>
);
};
const ConnectedModelView = connect(ModelView);
export default ConnectedModelView;
AppRegistry.registerComponent('ModelView', () => ModelView);
从上面的代码中,我的道具ModelView
不应该是未定义的。在初始化时,它的值应该是earth
。
道具应该在Store.js
. 下面是代码:
import React from 'react';
const State = {
planetName: 'earth'
};
const listeners = new Set();
export default function connect(Component) {
return class Wrapper extends React.Component {
state = {
planetName: State.planetName
};
_listener = () => {
this.setState({
planetName: State.planetName
});
};
componentDidMount() {
listeners.add(this._listener);
}
componentWillUnmount() {
listeners.delete(this._listener);
}
render() {
return (
<Component
{...this.props}
planetName={this.state.planetName}
/>
);
}
};
}
从 facebook 代码中获取一个页面,我正在做的是通过Store.connect
方法初始化模型视图。此方法ModelView
在我通过State.planetName
. 但是,我一直不确定,我不知道为什么。我已经硬编码了具有 earth 值的代码的每个部分,State.planetName
但它仍然是未定义的。道具没有设置为我想要的值,我不知道为什么。有人可以帮我解释为什么会这样吗?我将不胜感激。