Skip to content

Instantly share code, notes, and snippets.

@mnghn07
Last active May 22, 2020 10:48
Show Gist options
  • Save mnghn07/4436dc7bd4d4006c09ec693e30558eb3 to your computer and use it in GitHub Desktop.
Save mnghn07/4436dc7bd4d4006c09ec693e30558eb3 to your computer and use it in GitHub Desktop.
import React,{Component} from 'react';
import {View,Text,Button} from 'react-native';
export default class DetailScreen extends Component {
constructor(props){
super(props);
}
render(){
return(
<View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
<Text>DetailScreen</Text>
<Button title="Go Back" onPress={()=> this.props.navigation.goBack()} />
</View>
);
}
}
import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class HomeScreen extends Component {
constructor(props){
super(props);
}
render(){
return(
<View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
<Text>HomeScreen</Text>
/* Use the name of the navigation in stack*/
<Button title="Go to Detail" onPress={()=> this.props.navigation.navigate("Detail")} />
</View>
);
}
}
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// import screens here
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';
const Stack = createStackNavigator();
export default App extends React.Component {
render(){
return(
/* Here's the wrapper for navigation */
<NavigationContainer>
/* Here's the stack, you input your screen */
<Stack.Navigator>
/* The name in each screen is used to call to go to each screen */
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment