React Native: How to redirect - react-native

Question

I'm new to React Native and I just don't get how react-navigation works. I've already spend multiple work days and tried different variants, but I don't even get the examples from https://reactnavigation.org/docs/intro/ to work.
My project is created with create-react-native-app AwesomeProject, like it's described on the React Native Docs.
So I went back to my last working point (without routing).
This is my File Structure:
root
- src
- - screens
- - - LoginScreen.js
- - - HomeScreen.js
- App.js
In my App.js I just perform an easy call:
import LoginScreen from './src/screens/LoginScreen';
export default LoginScreen;
This is a simplified version of my LoginScreen.js:
import React from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
Button,
ReactNative,
} from 'react-native';
/**
* Actual View
*/
class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
// some values
}
}
render() {
return (
<View style={[styles.containerOne]}>/>
// Some Input fields
<Button
onPress={this.loginButtonOnPress.bind(this)}
title="Login"
style={[styles.loginButton]}
/>
</View>
);
}
loginButtonOnPress() {
// Validation with fetch
}
}
export default LoginScreen;
/**
* Style
*/
const styles = StyleSheet.create({
containerOne: {
marginTop: -160,
justifyContent: 'center',
flex: 1,
alignItems: 'center',
}
loginButton: {
color: 'blue',
marginTop: 10,
}
});
The LoginScreen.js should be the first displayed page. I want to load my HomeScreen.js file when loginbuttonOnPress get called. How am I supposed to do that? I've already found something like
const SimpleApp = StackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
});
But I don't get this to work, too.
I'm thankfull for every help I can get.

Answer 1

Press login button then go to HomeScreen.
render() {
return (
<View style={[styles.containerOne]}>/>
// Some Input fields
<Button
onPress={() => navigation.navigate('Home'))}
title="Login"
style={[styles.loginButton]}
/>
</View>
);
}
You can try it work
App.js
const SimpleApp = StackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
},{ swipeEnabled: false }
);
export default SimpleApp

Answer 2

Try this inside you function
loginButtonOnPress() {
this.props.navigation.navigate('Home')
}