使用标签导航，底部缺口是错误的颜色

Question

我正在使用 React-Native 和 Expo。我对某些屏幕使用标签导航，对那些我不想使用标签的屏幕使用堆栈导航。不幸的是，在带有 Tab Navigation 的屏幕上，底部槽口（至少在 iOS 上）保持白色背景。顶部槽口具有适当的背景颜色。在 Stack Navigation 页面上，一切都是正确的颜色。

这是我的 App.js 文件，之后是上面屏幕截图中看到的屏幕。

App.js

import { useContext, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as SplashScreen from 'expo-splash-screen';
import { Ionicons } from "@expo/vector-icons";
import { MotivatorSettingsProvider } from './src/context/motivatorSettingsContext';
import { DBProvider } from './src/context/dbContext';
import ActionScreen from "./src/screens/ActionScreen";
import HomeScreen from "./src/screens/HomeScreen";
import NewInformationScreen from "./src/screens/NewInformationScreen";
import UserSettingsScreen from "./src/screens/UserSettingsScreen";
import AnalysisScreen from './src/screens/AnalysisScreen';
import ViewUserImagesScreen from './src/screens/ViewUserImagesScreen';
import useDatabase from './src/hooks/useDatabase';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

export function Root() {
  const isDBLoadingComplete = useDatabase();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color }) => {
          const size = 24;

          if (route.name === 'Home') {
            return <Ionicons name={'home'} size={size} color={color} />;
          } else if (route.name === 'UserSettings') {
            return <Ionicons name={'md-settings-sharp'} size={size} color={color} />;
          } else if (route.name === 'NewInformation') {
            return <Ionicons name={'ellipsis-horizontal-circle'} size={size} color={color} />;
          } else if (route.name === 'Analysis') {
            return <Ionicons name={'md-analytics'} size={size} color={color} />;
          }

        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
        tabBarActiveBackgroundColor: "black",
        tabBarInactiveBackgroundColor: "black",
        tabBarStyle: {
          borderTopColor: "#CCCCCC",
        }
      })}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false
        }}
      />
      <Tab.Screen
        name="Analysis"
        component={AnalysisScreen}
        options={{
          headerShown: false,
          tabBarLabel: "Analysis"
        }}
      />
      <Tab.Screen
        name="UserSettings"
        component={UserSettingsScreen}
        options={{
          headerShown: false,
          tabBarLabel: "Settings"
        }}
      />
      <Tab.Screen
        name="NewInformation"
        component={NewInformationScreen}
        options={{
          headerShown: false,
          tabBarLabel: "Information"
        }}
      />
    </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={Root}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Action"
          component={ActionScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="ViewUserImages"
          component={ViewUserImagesScreen}
          options={{
            headerShown: true,
            title: "Your Images",
            headerStyle: {
              backgroundColor: "black",
            },
            headerTitleStyle: {
              color: "white",
            }
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
};

export default () => {
  return (
    <DBProvider>
      <App />
    </DBProvider>
  );
};

Analysis.js

import React from 'react';
import { Text, StyleSheet, View, SafeAreaView, ScrollView } from 'react-native';
import HeaderComponent from '../components/HeaderComponent';

const AnalysisScreen = () => {

    return (
        <>
            <HeaderComponent showBack='true' showSettings='false' />
            <SafeAreaView style={[styles.container, { backgroundColor: "black" }]} >
                <ScrollView>
                    <Text style={{ color: 'white' }}>Analysis Screen</Text>
                </ScrollView>
                {/* <NotificationComponent /> */}
            </SafeAreaView>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer: {
        flex: 1,
    },
});

export default AnalysisScreen;

这可能很简单，但我就是想不通。

Answer 1

不要使用 SafeAreaView，那会阻止您的应用占据整个屏幕。请改用常规 View，这将使您的 backgroundColor: "black" 样式适用于应用的底部。

使用标签导航，底部缺口是错误的颜色

Using Tab Navigation, bottom notch is the wrong color

react-native

expo