본문 바로가기

React

React Native / navigation v5 2(페이지이동)

반응형

 

출발페이지와 도착페이지를 설정 후, 

각 페이지에 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>
    );
}

 

 

 

 

(왼)버튼클릭시 오른쪽으로 /  (오) 버튼클릭시 왼쪽으로 이동

 

반응형