Stacknavigation
Stacknavigation
N A V I G AT I O N R E A C T
N AT I V E
G E T T I N G S TA R T E D W I T H R E A C T
N A V I G AT I O N
• https://reactnavigation.org/docs/en/getting-
started.html
S TA C K N A V I G AT O R
THINK BACK BUTTON IN YOUR BROWSER
By default the stack navigator is configured to have the familiar iOS and
Android look & feel: new screens slide in from the right on iOS, fade in from
the bottom on Android. On iOS the stack navigator can also be configured
to a modal style where screens slide in from the bottom.
N O M E N C L AT U R E
• Screens
• Routes
T H I S W I L L E V E N T U A L LY B E C O M E T H E
S C R E E N T H AT P L AY S T H E P O D C A S T
S TA C K N A V I G AT O R E N T R I E S
createStackNavigator({
// For each screen that you can navigate to, create a new entry like this:
Profile: {
// `ProfileScreen` is a React component that will be the
// main content of the screen.
screen: ProfileScreen,
},
...MyOtherRoutes,
});
M O D I F Y I N G T H E E N T R Y P O I N T ( A P P. J S )
PA R A D I G M O N T H E W E B
PA R A D I G M O N I N R E A C T N A V I G AT I O N
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>
• https://snack.expo.io/@react-navigation/going-back-
v3
A D D I N G N A V I G AT I O N T O P O D C A S T
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Player')}}>
<Featured/>
</TouchableOpacity>
STYLING SUPPORT
Configuring the Header
https://snack.expo.io/@professorxii/aGVhZG
N A V I G AT I O N L I F E C Y C L E
• What happens to the Home Screen when you navigate
away from it?
• Excepted behavior
SCREEN SCREEN
1 3
2
1 COMPONENTWILLUNMOUNT
H O W E V E R T H E B E H AV I O R
2 COMPONENTDIDMOUNT
I S M O R E C O M P L I C AT E D
componentDidMount B
componentDidMount A SCREEN SCREEN
A B
S TA C K
A Still on stack so
Unmount is not called A
• willFocus - the screen will focus
R E A D PA R A M E T E R
this.props.navigation.getParam(paramName, defaultValue)
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
}
S P R E A D AT T R I B U T E S
A L L O W S Y O U PA S S A V A R I A B L E N U M B E R O F V A R I A B L E S
this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();
import * as React from 'react'
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress={()=>{this.props.navigation.toggleDrawer()}}>
<Image style={styles.menuIcon} source={require('../assets/
menuIcon.png')}/>
</TouchableOpacity>
<Text style={styles.title}> Featured</Text>
<Image style={styles.searchIcon} source={require('../assets/
searchIcon.png')} />
</View>
)
}
N E E D T O PA S S N A V I G AT I O N P R O P E R T Y T O C H I L D E L E M E N T S
<Header navigation={this.props.navigation}/>
O T H E R N A V I G AT I O N F E AT U R E
https://reactnavigation.org/docs/en/headers.html