앱 만드는 기록 - Drawer위에 페이지 띄우기

막무가내로 하다보니 헷갈리는게 많아 개인 기록용으로 남기고자 작성

DrawerNaviagtor 위에 다른 화면을 띄우려고 하면 StackNavigator 사용

react-navigator 중 DrawerNavigator를 메인 메뉴 및 화면 → 카드를 누르면 상세 페이지를 따로 띄우려고 하면 StackNavigator로 DrawerNavigator와 상세 페이지를 감싸주면 된다.

App.js

import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator/>
    </NavigationContainer>
    );
}

StackNavigator.js (감싸는 가장 상위 Navigator)

import { createStackNavigator } from '@react-navigation/stack';

// 여기서 FunctionPage는 상세페이지, DrawerMain은 DrawerNavigator
import FunctionPage from '../pages/FunctionPage'
import DrawerMain from './DrawerNavigator'

const Stack = createStackNavigator();

export default function StackNavigator () {
    return (
        <Stack.Navigator screenOptions={{height: 100}}>
            <Stack.Screen name="DrawerMain" component={DrawerMain}/>
            <Stack.Screen name="FunctionPage" component={FunctionPage}/>
        </Stack.Navigator>
    );
}

적고 나니 굳이 app과 navigator 파일을 나눌 필요는 없어보이지만.. 나중에 고쳐야지 ㅠ