React Navigation 5 Tutorials

📌 튜토리얼을 따라한 프로젝트입니다!

사라진 상단바 생성하기

Home / Details Stack 생성하기

1. Stack을 복사해서 HomeStack / DetailsStack을 생성해줍시다

const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();

2. Stack을 사용하여 HomeStackScreen 컴포넌트와 DetailsStackScreen 컴포넌트 생성하기

const HomeStackScreen = ({navigation}) => {
  return (
    <HomeStack.Navigator screenOptions={{
      headerStyle:{
        backgroundColor: '#009387',
    },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }}>
      <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title : 'Home'
      }}/>
    </HomeStack.Navigator>
  );
};

const DetailsStackScreen = ({navigation}) => {
  return (
    <DetailsStack.Navigator screenOptions={{
      headerStyle:{
        backgroundColor: '#009387',
    },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }}>
      <DetailsStack.Screen name="Details" component={DetailsScreen} options={{
        title : 'Details'
      }}/>
    </DetailsStack.Navigator>
  );
};

3. APP 컴포넌트에 있는 Drawer.Screen 수정하기

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeStackScreen} />
        <Drawer.Screen name="Details" component={DetailsStackScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

상단바에 menu icon 추가하기

1. Icons import 하기

1. 설치

npm install react-native-vector-icons

2. import 하기

import Icon from 'react-native-vector-icons/Ionicons';

2. menu icon 추가하기

각 HomeStackScreen/DetailsStackScreen에 headerLeft 소스를 추가해줍시다.

      <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title : 'Home',
        headerLeft: () => (
          <Icon.Button name='ios-menu' size={25}
          backgroundColor= '#009387' onPress = {() => {navigation.openDrawer()}}>
          </Icon.Button>
        )
      }}/>

결과보기