React Native Router Flux

Question

Je suis nouveau pour réagir natif, et en essayant de construire une application pour pratiquer. Je suis arrivé à la partie routage, mais cela ne fonctionne pas correctement. J'ai maintenant trois composants. L'application, le routeur et un jeu appelé.

J'ai ceci dans le routage:

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; 

Et ceci dans l'application:

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

Mais je reçois le message d'erreur suivant: non défini n'est pas une fonction. Qu'est-ce qui me manque?

Merci beaucoup à l'avance

Answer 1

Vous devez également définir l'écran d'accueil de votre routeur

importer votre GameComponent

import GameComponent from './game'; 

Créez votre routeur

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

Créer votre écran d'accueil

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

Main App

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