createDrawerNavigator (react navigation draw)이용해 옆 메뉴 만들기 (+ animated node with id 2 already exists 오류 해결)

결과물

Drawer Navigator | React Navigation

https://reactnavigation.org/docs/drawer-navigator/

기본적으로 옆 메뉴를 만드려면  react navigation drawer 모듈을 깔아야하는데 그러기위해선 이것만 깔야아하는게 아님

위 페이지에 나와있는

yarn add @react-navigation/drawer

yarn add react-native-gesture-handler react-native-reanimated

이런거 깔아야하는데 이거만 깔았다고 다가 아니라 react-nativation-reanimated는 요구하는게 더 있음.

Installation | React Native Reanimated (swmansion.com)

Installation | React Native Reanimated

여기를 보면 babel.config 나 android 내부 파일 내용들도 일부 수정을 해줘야함

이렇게하고 node 서버를 종료시킨 다음에 다시 npm run android해줌

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
//import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
//import Ionicons from 'react-native-vector-icons/Ionicons';
import {createDrawerNavigator} from '@react-navigation/drawer';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function MypageScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

//const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

export default function App() {
  return (
<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={HomeScreen}/>
    <Drawer.Screen name="Setting" component={SettingsScreen}/>
    <Drawer.Screen name="Mypage" component={MypageScreen}/>
  </Drawer.Navigator>
    </NavigationContainer>
  );
}

(App.js)

이런 간단한 코드로 테스트해보면 동영상처럼 나온다.

진짜 죽일뻔... 모듈깔때 모든 모듈이 잘 깔렸는지, 어떤 부분에서부터 에러가 나는지 파악해서 그 모듈설정을 고치는것이 중요해보인다.