5.3.1.1 드로어 커스터마이징하기

이전에 네이티브 스택 내비게이터를 사용했을 때 헤더를 커스터마이징한 것처럼 드로어 또한 커스터마이징할 수 있습니다.

우선 드로어에 나오는 화면 이름은 네이티브 스택 내비게이터를 사용했을 때처럼 Screen 컴포넌트에 options Props를 통해 title 값을 지정하면 됩니다.

App.js

(...)

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerPosition="left"
        backBehavior="history"
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
          options={{title: '홈'}}
        />
        <Drawer.Screen
          name="Setting"
          component={SettingScreen}
          options={{title: '설정'}}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

▲ 그림 5-16 드로어의 화면 이름 변경