How do I Navigate between multiple .js file in my React Native App?
How do I Navigate between multiple .js file in my React Native App?
As a newbie in React Native, I'm trying to find a way to Navigate between the pages. everything that I found from google was about navigating between classes inside App.js and some other that has separated files was not working for me.
I found a lot of examples of using 'Navigator','StackNavigator','React-native-router-flux' but none of them worked for me.
this is what I need to learn:
login page: ./src/pages/Login.js
Homepage: ./src/pages/Home.js
login page(username & password) ------> if true -----> Homepage
1 Answer
1
Just install plugin
npm install --save react-navigation
import plugin and files in your app.js
import {
createStackNavigator,
} from 'react-navigation';
import LoginScreen from './src/pages/Login.js';
import HomeScreen from './src/pages/Home.js';
const App = createStackNavigator({
Login: { screen: LoginScreen },
Home: { screen: HomeScreen },
});
Considering this as your login screen
class LoginScreen extends React.Component {
static navigationOptions = {
title: 'Login',
};
render() {
return (
<Button
title="Login"
onPress={() => this.checkLogin() }
/>
);
}
checkLogin = () => {
const { navigate } = this.props.navigation;
if(username == "user" && password == "pass"){
navigate('Home')
}
}
}
Find out more from React navigation
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
