问使用SafeAreaView的React导航抽屉

EN

 <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{ flex: 0, backgroundColor: '#3b7a99' }} />
        <SafeAreaView style={[Layout.fill, { backgroundColor: '#fff' }]}>
          <NavigationContainer ref={navigationRef}>
            <StatusBar barStyle="light-content" backgroundColor="#3b7a99" />
            <ApplicationNavigator />
          </NavigationContainer>
        </SafeAreaView>
      </PersistGate>
    </Provider>

import React, { useEffect, useState } from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { DashboardNavigator, OrderNavigator, TireNavigator } from '@/Navigators'
import { useSelector } from 'react-redux'

import DrawerContent from './DrawerContent'

const Drawer = createDrawerNavigator()

let MainNavigator

// @refresh reset
const ApplicationNavigator = () => {
  const [isApplicationLoaded, setIsApplicationLoaded] = useState(false)
  const applicationIsLoading = useSelector((state) => state.startup.loading)

  useEffect(() => {
    if (MainNavigator == null && !applicationIsLoading) {
      MainNavigator = require('@/Navigators/Main').default
      setIsApplicationLoaded(true)
    }
  }, [applicationIsLoading])

  return (
    <Drawer.Navigator
      drawerStyle={{ width: '100%' }}
      drawerContent={(props) => <DrawerContent {...props} />}
    >
      <Drawer.Screen name="Dashboard" component={DashboardNavigator} />
      <Drawer.Screen name="Order" component={OrderNavigator} />
      <Drawer.Screen name="Tire" component={TireNavigator} />
    </Drawer.Navigator>
  )
}

export default ApplicationNavigator