1. createStackNavigator 함수 호출

const Stack = createStackNavigator();

2. 각 Screen을 Stack화

<Stack.Screen
  name="RecInvoiceItem"
  component={RecInvoiceItemScreen}
  options={{ header: () => <HeaderBackButton />, headerShown: true }}
/>

n. React vs React-Native

example)

라우팅 선언

// React
useRoutes([
    {
      path: 'auth',
      children: [
        {
          path: 'login',
          element: (
            <GuestGuard>
              <Login />
            </GuestGuard>
          ),
        }
      ],
    },
	]);
}

// React-Native
<Stack.Screen
  name="Main"
  component={MainBottomTabNavigator}
  options={{ header: () => <HeaderBackButton />, headerShown: false }}
/>

이동할 페이지

// React
const navigate = useNavigate();
navigate('/test', { state: { id: 1 }})

// React-Native
const navigation = useNavigation<NavigationProps>();
navigation.navigate('RecInvoiceItems', { sendingId: item.id });

이동한 페이지

// React
const location = useLocation();
const { id } = location.state;

// React-Native
const router = useRoute<RecInvoiceItemProps>();
const { sendingId } = useRoute<RecInvoiceItemProps>().params;