react-native - 使用 SafeAreaView 反应导航抽屉

Question

尝试使用带有安全区域视图的反应导航抽屉。顺便说一句，我正在使用自定义抽屉。

我的抽屉像下面这样工作（红色的一个是抽屉。蓝色的一个是安全区域的休息，底部的白色字段也是）。

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

这是我的代码；

我的 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

标签： react-nativereact-navigation

Answer 1

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

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

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