React Native 抽屉导航静态视图区域

Question

我制作了在左侧打开的菜单，但我想在这个菜单的底部设置一个区域，并在其中放置一个图片和退出按钮。我的尝试失败了。我正在等待您的帮助。

我创建了一个视图或尝试了许多其他方法，但主要是“屏幕”和“组”或“儿童”错误。

import React from 'react'
import {View, Text, TouchableOpacity, SafeAreaView} from 'react-native'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {createStackNavigator} from '@react-navigation/stack'
import {NavigationContainer} from '@react-navigation/native'

import Dashboard from "./src/Screen/Dashboard"
import WaterManagement from "./src/Screen/WaterManagement"
import Inspection from "./src/Screen/Inspection"
import LeakDetection from "./src/Screen/LeakDetection"
import LicenseTDLTracker from "./src/Screen/LicenseTDLTracker"
import Forecast from "./src/Screen/Forecast"
import PondManagement from "./src/Screen/PondManagement"
import EndofJobReports from "./src/Screen/EndofJobReports"
import {FontAwesome5, Ionicons, Entypo, MaterialCommunityIcons} from '@expo/vector-icons'; 

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const DashboardIcon = ({focused, color, size})=><MaterialCommunityIcons name='monitor-dashboard' size={size} color={color} />
const WaterManagementIcon = ({focused, color, size})=><FontAwesome5 name='hand-holding-water' size={size} color={color} />
const InspectionIcon = ({focused, color, size})=><MaterialCommunityIcons name='calendar-check' size={size} color={color} />
const LeakDetectionIcon = ({focused, color, size})=><MaterialCommunityIcons name='pipe-leak' size={size} color={color} />
const LicenseTDLTrackerIcon = ({focused, color, size})=><MaterialCommunityIcons name='license' size={size} color={color} />
const ForecastIcon = ({focused, color, size})=><Entypo name='line-graph' size={size} color={color} />
const PondManagementIcon = ({focused, color, size})=><MaterialCommunityIcons name='water-well' size={size} color={color} />
const EndofJobReportsIcon = ({focused, color, size})=><Ionicons name='newspaper-outline' size={size} color={color} />

export default function App() {
    return(
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Dashboard" component={Dashboard} options={{ drawerIcon: DashboardIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="Water Management" component={WaterManagement} options={{ drawerIcon: WaterManagementIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="Inspection" component={Inspection} options={{ drawerIcon: InspectionIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="Leak Detection" component={LeakDetection} options={{ drawerIcon: LeakDetectionIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="License & TDL Tracker" component={LicenseTDLTracker} options={{ drawerIcon: LicenseTDLTrackerIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="Forecast" component={Forecast} options={{ drawerIcon: ForecastIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="Pond Management" component={PondManagement} options={{ drawerIcon: PondManagementIcon, headerTitleAlign: "center" }} />
        <Drawer.Screen name="End of Job Reports" component={EndofJobReports} options={{ drawerIcon: EndofJobReportsIcon, headerTitleAlign: "center" }} />
      </Drawer.Navigator>
    </NavigationContainer>
    )
}