使用 SafeAreaView 响应导航抽屉

Question

尝试使用带有 safeareaview 的 react 导航抽屉。 顺便说一下，我正在使用自定义抽屉。

我的抽屉的工作方式如下（红色的是抽屉。蓝色的是safeareaview的休息区，底部的白色区域也是如此）。

我希望抽屉覆盖所有安全区域字段。 （它必须覆盖顶部蓝色和底部白色区域）

这是我的代码；

我的 App.js：

 <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

Answer 1

子组件不能覆盖父组件应用的填充。

您不应将整个应用包装在 SafeAreaView 中，而应在适用时将特定内容包装在屏幕中。

更多信息https://reactnavigation.org/docs/handling-safe-area