如何使用React VR和React VR?

时间:2017-05-12 06:51:43

标签: react-router react-360

我正在试图找出如何使用React VR插入React路由器。

首先,我应该使用react-router dom / native吗?目前尚不清楚,因为React VR构建在React Native之上,但在浏览器中运行。

这是我遇到问题的代码。

import React from 'react';

import { AppRegistry } from 'react-vr';

import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'

import Landing from './components/Landing';
import Video from './components/Video';

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <Router>
        <Route exact path={'/vr/'} component={Landing} />
        <Route exact path={'/vr/video/'} component={Video} />
      </Router>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

/vr/上打开浏览器时,上面的代码会返回以下错误: React Router + React VR errors

3 个答案:

答案 0 :(得分:1)

React Router的作者Ryan Florence解释了他是如何做到的:https://twitter.com/ryanflorence/status/808890440929771520

我不知道图书馆。

答案 1 :(得分:1)

我基于使用react-router 4.1.2的remydib提到的Ryan Florence视频来提供此解决方案。

在主要应用组件中:

import { MemoryRouter, Redirect, Route, Switch } from 'react-router';

...

    <MemoryRouter>
    ...
    </MemoryRouter>

在使用VrButton的组件中:

export class NavBtn extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    render() {
        const { to } = this.props;
        const onClick = () => this.context.router.history.push(to);

        return (
            <VrButton onClick={onClick}>
               ...
            </VrButton>
        );
    }
}

npm中有react-router-vr个包,但它看起来只是占位符。遗憾的是,目前没有浏览器URL的支持。

答案 2 :(得分:-1)

React-VR不使用其他应用程序的常规历史API。内存路由器是上面列出的选项,但我建议使用条件渲染。

您可以使用Native Modules中的History API来将信息加载到URL中。