openDrawer () не определен реагировать родной

Question

Приложение. Js

У меня есть кнопка меню в заголовке, чтобы открыть ящик. Когда я нажимаю правую кнопку заголовка, это выдает ошибку, говорящую, что undefined не о. Скриншот ошибки . Но когда я, например, регистрирую сообщение, оно работает.

<NavigationContainer>
      <Stack.Navigator>
         <Stack.Screen name="Home" component={HomeScreen} options={{
           headerRight: () => {
              return (
                 <Button transparent onPress={() => {
                     this.props.navigation.openDrawer()
                 }}>
                     <Icon name="menu" style={{ fontSize: 30, marginTop: 4 }} />
                  </Button>
                 )
              }}} />
   </Stack.Navigator>
</NavigationContainer>

DRAWER

Когда я пытаюсь открыть ящик на этом экране. Работает

<View style={{ flex: 1 }}>
    <Drawer.Navigator>
        <Drawer.Screen name="Main" component={MainScreen} />
        <Drawer.Screen name="Setting" component={SettingScreen}/>
   </Drawer.Navigator>
</View>