navigate를 이용한 페이지이동

SignInPage

export default function SignInPage({ navigation }) {
  const goSignUp = () => {
    navigation.navigate('SignUpPage', { title: '회원가입 페이지에서 왔음' });
  };
  return (
    <View style={styles.contianer}>
      <Text> SignInPage </Text>
      <TouchableOpacity onPress={goSignUp}>
        <Text>회원가입 하러가기</Text>
      </TouchableOpacity>
    </View>
  );
}

onPress={goSignUp}로 goSignUp 함수를 실행시키며
navigation.navigate('SignUpPage', { title: '회원가입 페이지에서 왔음' })로 SignUpPage로 이동 그런데 이동하면서 딕셔너리(키-밸류)를 인자로 가져감

export default function SignUpPage({ route }) {
  return (
    <View style={styles.contianer}>
      <Text> SignUpPage </Text>
      <Text> {route.params.title} </Text>
    </View>
  );
}

이동하면서 가져온 { route }를 받아 와서 {route.params.title},
즉, 비구조할당방식의 형태로 데이터에 접근한다.

참고로 navigate, route이런게 다 어디서왔나?

StackNavigator.jsx

import React from "react";
//설치한 스택 네비게이션 라이브러리
import { createStackNavigator } from "@react-navigation/stack";
//페이지로 만든 컴포넌트
import SignInPage from "../pages/SignInPage";
import SignUpPage from "../pages/SignUpPage";

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙!
const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="SignInPage" component={SignInPage} />
      <Stack.Screen name="SignUpPage" component={SignUpPage} />
      <Stack.Screen name="MainPage" component={MainPage} />
      <Stack.Screen name="DetailPage" component={DetailPage} />
      <Stack.Screen name="AddPage" component={AddPage} />
      <Stack.Screen name="MyPage" component={MyPage} />
    </Stack.Navigator>
   )
}

여기에서 다 뿌려주는것이기 때문이다. (군단의심장)