反应本机路由器通量

Question

我是 React Native 的新手，正在尝试构建一个应用来练习。我已经到达路由部分，但它无法正常工作。我现在有三个组成部分。应用程序、路由器和一个名为游戏的应用程序。

我在路由中有这个：

import React from 'react';
import { Scene, Router } from 'react-native-router-flux'
import { GameComponent } from './game'

const RouterComponent = () => {
   return (
       <Router>
           <Scene key="root">
               <Scene
                   key="game"
                   component={GameComponent}
                   title="New Game"
               />
           </Scene>
        </Router>
    );
 }
export default RouterComponent;

在应用程序中：

import { Actions } from 'react-native-router-flux';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Basketball App</Text>
                <Button
                     onPress={() => Actions.game()}
                     title="New Game">
                </Button>
            </View>
        );
    }

但我收到以下错误消息：undefined 不是函数。我错过了什么？

非常感谢

Answer 1

您还需要在路由器中定义主屏幕

导入您的 GameComponent

import GameComponent from './game';

创建你的路由器

const RouterComponent = () => {
     return (
       <Router>
           <Scene key="root">
               <Scene key="home" component={Home} title="Home" />
               <Scene key="game" component={GameComponent} title="New Game" />
           </Scene>
        </Router>
      );
}

创建您的主屏幕

class Home extends Component {
  render() {
    return (
      <View style={{flex:1}}>
          <Text>Basketball App</Text>
          <Button
               onPress={() => Actions.game() }
               title="New Game">
          </Button>
      </View>
    );
  }
}

主应用程序

export default class App extends React.Component {
    render() {
        return (
            <RouterComponent />
        );
    }
}

反应本机路由器通量

React Native Router Flux

javascript

native

url-routing

flux

reactjs