Undefined navigator.push React-native 0.43.4 - reactjs

Question

I am using the Navigator component of react-native but i still get error when i want to push to anthor page push undefined is not a function so there is my code
import React, { Component } from 'react';
import {
View,
StyleSheet,
Navigator,
Text,
TouchableHighlight
} from 'react-native';
import Home from './Home';
import Main from './Main';
class MainApp extends Component {
_navigate(){
this.props.navigator.push({
name: Home
})
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={ () => this._navigate() }>
<Text>GO To View</Text>
</TouchableHighlight>
</View>
);
}
}
and Home component
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>Welcome Hello</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Home;
I still get this error, I am a beginner in react-native so help me please ? why react-native so hard ?

Answer 1

After some hours of work, i resolve my problem
First i create MainApp and i define a Navigator with initialRoute my code look like this
class MainApp extends Component {
renderScene(route, navigator) {
console.log(route, navigator);
if (route.component) {
return React.createElement(route.component, { navigator });
}
}
render() {
return (
<Navigator
initialRoute={{name: 'Home', component: Home}}
configureScene={() => {
return Navigator.SceneConfigs.FloatFromRight;
}}
renderScene={this.renderScene}
/>
);
}
}
and after in Home screen i use this function
_navigate() {
this.props.navigator.replace({
name: 'Main',
component: Main
});
}
So now my project work well , the key is create a screen route hope it useful

Answer 2

So ! First of all, RN is not so hard ^^ I started two weeks ago don't worry it will become easier !
I'll give you an example if you're ok with that !
MainApp
renderScene(route,nav) {
switch (route.screen) {
case "LaunchScreen":
return <LaunchScreen navigator={nav} />
case "LoginScreen":
return <LoginScreen navigator={nav} />
case "ListBillScreen":
return <ListBillScreen navigator={nav} />
case "AddBillScreen":
return <AddBillScreen navigator={nav} />
case "BillScreen":
return <BillScreen navigator={nav} bill={route.props}/>
case "PersistanceDemo":
return <PersistanceDemo navigator={nav} />
}
}
render () {
return (
<Navigator
initialRoute={{screen: 'LaunchScreen'}}
renderScene={(route, nav) => {return this.renderScene(route, nav)}}
/>
)
}
}
You set all your "Routes" in the mainApp okay?
After that, if you want to navigate between views in others .js, you need to do this way :
this.props.navigator.push({ screen: 'AddBillScreen' });
You need to navigate with the name of your screen ! Once you've done that, it will be soooo easy for you to navigate between views you will see !
Keep strong !