React Native - How to pass from screen to another screen? - reactjs

Question

I have an simple application that have just two screens: Login and Home. I want to go to Home screen from Login screen. I don't want to use a Navigator, if it is possible. This is my code:
Index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('App', () => App);
App.js
class App extends Component {
constructor(props) {
super(props);
}
render() {
return(
<LoginPage />
);
}
}
export default App;
LoginPage.js
export class LoginPage extends Component{
constructor(props) {
super(props);
this.state = { email: '', password: '' };
}
goToHomePage = () => {
// HERE!!!!!!
};
onButtonPress = () => {
this.goToHomePage();
};
render(){
return(
<View>
<TextInput
style={Styles.textInput}
onChangeText={(email) => this.setState({email})}
placeholder={'Email'}
value={this.state.email}
/>
<TextInput
style={Styles.textInput}
onChangeText={(password) => this.setState({password})}
secureTextEntry
placeholder={'Password'}
value={this.state.password}
/>
<Button onPress={() => this.props.navigation.navigate('HomePage')}
title="Login"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
};
}
HomePage.js
export class HomePage extends Component{
constructor(props) {
super(props);
}
goToLoginPage = () => {
// HERE !!!!!!
};
onButtonPress = () => {
this.goToLoginPage();
};
render () {
return (
<View style={Styles.container}>
<View>
<LoginHeader Title={'Titulo do HomePage'} />
</View>
<Button
style={Styles.button}
title={'Logout'}
onPress={this.onButtonPress}
/>
</View>
)
}
}
So, how can I implement a method for move to screens with this code? I've tried to use react-native-navigation and react-navigation, but does not work for me in this case.
EDIT
I've tried to use this:
App.js
import { createStackNavigator } from 'react-navigation';
const RootStack = createStackNavigator(
{
HomePage: HomePage,
LoginPage: LoginPage,
},
{
initialRouteName: 'LoginPage',
}
);
class App extends Component {
constructor(props) {
super(props);
}
render() {
return(
<RootStack />
);
}
}
export default App;
LoginPage.js
import { createStackNavigator } from 'react-navigation';
export class LoginPage extends Component{
constructor(props) {
super(props);
this.state = { email: '', password: '' };
}
goToHomePage = () => {
// HERE!!!!!!
};
onButtonPress = () => {
this.goToHomePage();
};
render(){
return(
<View>
<TextInput
style={Styles.textInput}
onChangeText={(email) => this.setState({email})}
placeholder={'Email'}
value={this.state.email}
/>
<TextInput
style={Styles.textInput}
onChangeText={(password) => this.setState({password})}
secureTextEntry
placeholder={'Password'}
value={this.state.password}
/>
<Button onPress={() => this.props.navigation.navigate('HomePage')}
title="Login"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
);
};
}

Answer 1

Do you import React, {Component} from "react"?