[j React Native] Drawer Navigator

DrawerNavigator 구현해보자. (mac환경)

 

 

1. 패키지 설치

 

yarn add @react-navigation/drawer
yarn add react-native-gesture-handler
yarn add react-native-reanimated

 

2. ios pod install

npx pod-install

 

3. App.js 구현

import React,{Component} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {View, Text, Button,StyleSheet} from 'react-native';
import DrawerHomeScreen from './src/home_drawer';
import DrawerUserScreen from './src/user_drawer';

const Drawer = createDrawerNavigator();

class App extends Component {

 render() {
   return (
       <NavigationContainer>
         <Drawer.Navigator>
           <Drawer.Screen name="Home" component={DrawerHomeScreen}/>
           <Drawer.Screen name="User" component={DrawerUserScreen}/>
         </Drawer.Navigator>
         </NavigationContainer>   
   )
 }
}


export default App;

 

 

 

4. 앱실행(Ios)

npx react-native run-ios

 

**실행시 오류가 난다면 해당 부분 수정

- bable.config.js 내

plugins: ['react-native-reanimated/plugin'] 추가

 

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};