반응형
출발페이지와 도착페이지를 설정 후,
각 페이지에 navigation 변수를 사용해 이동한다.
home.js
/출발페이지
import React from 'react';
import { View, Text, Button} from 'react-native';
import { globalStyles } from '../styles/global'
export default function Home({navigation}) {
const pressHandler = () => {
// 페이지 이동. navigate = push
// 변수는 routes 파일 screens 내 키값을 사용한다
navigation.navigate('ReviewDetail');
// navigation.push('ReviewDetail');
}
return(
<View >
<Text style={globalStyles.titleText}>Home Screen</Text>
<Button title="go to review" onPress={pressHandler} />
</View>
)
}
reviewDetail.js
/도착페이지
import React from 'react';
import {StyleSheet, View, Text, Button } from 'react-native';
export default function ReviewDetails({navigation}) {
const pressHandler = () => {
// 뒤로 돌아가기. goBack = pop
navigation.goBack();
// navigation.pop();
}
return(
<View style={styles.container}>
<Text>ReviewDetails Screen</Text>
<Button title="back to home" onPress={pressHandler} />
</View>
)
}
const styles = StyleSheet.create({
container: {
padding:24
}
});
✨ 아래 function Home 함수는 같은 의미 (props 안에 navigation 있음)
export default function Home({navigation}){
const pressHandler = () => {
navigation.navigate('ReviewDetail');
}
export default function Home(props){
const navigation = props.navigation;
const pressHandler = () => {
navigation.navigate('ReviewDetail');
}
//console.log(navigation);
Object {
"navigation": Object {
"actions": Object {
"dismiss": [Function dismiss],
"goBack": [Function goBack],
"navigate": [Function navigate],
"pop": [Function pop],
"popToTop": [Function popToTop],
"push": [Function push],
"replace": [Function replace],
"reset": [Function reset],
"setParams": [Function setParams],
},
"addListener": [Function addListener],
"dangerouslyGetParent": [Function anonymous],
"dismiss": [Function anonymous],
"dispatch": [Function anonymous],
"emit": [Function emit],
"getChildNavigation": [Function getChildNavigation],
"getParam": [Function anonymous],
"getScreenProps": [Function anonymous],
"goBack": [Function anonymous],
"isFirstRouteInParent": [Function isFirstRouteInParent],
"isFocused": [Function isFocused],
"navigate": [Function anonymous],
"pop": [Function anonymous],
"popToTop": [Function anonymous],
"push": [Function anonymous],
"replace": [Function anonymous],
"reset": [Function anonymous],
"router": undefined,
"setParams": [Function anonymous],
"state": Object {
"key": "id-1625123411660-1",
"routeName": "Home",
},
},
"screenProps": undefined,
}
```
App.js
import Navigator from './routes/homeStack'
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
export default function App() {
return (
<NavigationContainer>
<Navigator />
</NavigationContainer>
);
homeStack.js
import React, { useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home'
import ReviewDetail from '../screens/reviewDetail'
const Stack = createStackNavigator();
export default function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} /> //맨 위에 있는 stack이 default
<Stack.Screen name="ReviewDetail" component={ReviewDetail} />
</Stack.Navigator>
);
}
반응형