未定义不是对象（评估“ this.props.navigator.replace”）

Question

I followed a tutorial to use React-Navigation, I got a problem when trying to move to another page. I get this error: Undefined is not an object (evaluating 'this.props.navigator.replace')

I searched here and on other sites but nothing worked for me. This is the code I have:

index:

 import React, { Component } from 'react';
 import { Root } from './config/Router';

 class Application extends Component{
   render(){
     return <Root />;
   }
 }

export default Application;

Router:

import React from 'react';
import { StackNavigator } from 'react-navigation';

import Login from '../pages/Login';
import Home from '../pages/Home';

export const Root = StackNavigator({
  Login:{
    screen: Login,
  },
  Home:{
    screen: Home,
    navigatorOptions:{
      title: "Homepage"
    }
  }
});

Login (when clicking the button here, the problem occurs):

  export default class Login extends Component{
  constructor(props){
    super(props);
  }
  _navigate(routeName){
    this.props.navigator.replace({
      name: routeName
    });
  }
  render(){
    return(
       <View style = {styles.container}>
          <TouchableOpacity onPress={this._navigate.bind(this, 'Home')}>
            <Text>
              Hello.
            </Text>
          </TouchableOpacity>
       </View>
    );
  }
}

What am I doing wrong ?

Thanks in advance.

Answer 1

According to the React Native docs , you'll want to navigate using this.props.navigation , not this.props.navigator :

 export default class Login extends Component{
  constructor(props){
    super(props);
  }
  _navigate(routeName){
    this.props.navigation({
      name: routeName
    });
  }
  render(){
    return(
       <View style = {styles.container}>
          <TouchableOpacity onPress={this._navigate.bind(this, 'Home')}>
            <Text>
              Hello.
            </Text>
          </TouchableOpacity>
       </View>
    );
  }
}

Answer 2

class HomeScreen extends React.Component {
  //Some code here  
}

class ChatScreen extends React.Component {
     //Some code here
}

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
});

AppRegistry.registerComponent('HelloWorld', () => SimpleApp);

You should register "Simple" rather than "HomeScreen"