在选项卡之间移动时反应本机屏幕白色闪烁

Question

im在App上工作，im在使用BottomTabBar，其中有StackNavigators。当我切换屏幕时，屏幕变白，好像它们正在加载。但我只希望它不加载动画或过渡。我只想要它像whatsapp或instagram，这样我就可以在屏幕之间切换，但是我需要为应用程序添加标题。

import React from "react";
import News from "../screens/News";
import Favorites from "../screens/Favorites";
import NewRecipe from "../screens/NewRecipe";
import Ingredients from "../screens/Ingredients";
import Profile from "../screens/Profile";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { MaterialIcons } from "@expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
import { createStackNavigator } from "@react-navigation/stack";

export default function AppScreen() {
  const Tab = createMaterialBottomTabNavigator();
  const NewsStack = createStackNavigator();
  const FavoritesStack = createStackNavigator();
  const NewRecipeStack = createStackNavigator();
  const IngredientsStack = createStackNavigator();
  const ProfileStack = createStackNavigator();

  function NewsNav() {
    return (
      <NewsStack.Navigator
        screenOptions={{
          animationEnabled: false,
        }}
      >
        <NewsStack.Screen
          name="News"
          component={News}
          options={{
            headerTintColor: "#277093",
            headerStyle: {
              backgroundColor: "#272727",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
            animationEnabled: false,
          }}
        />
      </NewsStack.Navigator>
    );
  }

  function FavoritesNav() {
    return (
      <FavoritesStack.Navigator>
        <FavoritesStack.Screen
          name="Favoriten"
          component={Favorites}
          options={{
            headerTintColor: "#277093",
            headerStyle: {
              backgroundColor: "#272727",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </FavoritesStack.Navigator>
    );
  }

  function NewRecipeNav() {
    return (
      <NewRecipeStack.Navigator
        screenOptions={{
          cardStyle: {
            opacity: 1,
          },
        }}
      >
        <NewRecipeStack.Screen
          name="Neue Rezepte"
          component={NewRecipe}
          options={{
            headerTintColor: "#277093",
            headerStyle: {
              backgroundColor: "#272727",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </NewRecipeStack.Navigator>
    );
  }

  function IngredientsNav() {
    return (
      <IngredientsStack.Navigator>
        <IngredientsStack.Screen
          name="Zutaten"
          component={Ingredients}
          options={{
            headerTintColor: "#277093",
            headerStyle: {
              backgroundColor: "#272727",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </IngredientsStack.Navigator>
    );
  }

  function ProfileNav() {
    return (
      <ProfileStack.Navigator>
        <ProfileStack.Screen
          name="Profil"
          component={Profile}
          options={{
            headerTintColor: "#277093",
            headerStyle: {
              backgroundColor: "#272727",
              height: 75,
            },
            headerTitleStyle: {
              marginTop: -15,
            },
          }}
        />
      </ProfileStack.Navigator>
    );
  }

  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({}) => {
            let iconName;

            if (route.name == "News") {
              iconName = "language";
            } else if (route.name == "Favoriten") {
              iconName = "star-border";
            } else if (route.name == "Hinzufügen") {
              iconName = "add-circle-outline";
            } else if (route.name == "Zutaten") {
              iconName = "shopping-cart";
            } else if (route.name == "Profil") {
              iconName = "person";
            }
            return (
              <MaterialIcons
                name={iconName}
                color={"#277093"}
                size={25}
              ></MaterialIcons>
            );
          },
        })}
        tabBarOptions={{
          activeTintColor: "green",
        }}
        barStyle={{ backgroundColor: "#272727" }}
      >
        <Tab.Screen
          name="News"
          component={NewsNav}
          options={{ animationEnabled: false }}
        />
        <Tab.Screen name="Favoriten" component={FavoritesNav} />
        <Tab.Screen name="Hinzufügen" component={NewRecipeNav} />
        <Tab.Screen name="Zutaten" component={IngredientsNav} />
        <Tab.Screen name="Profil" component={ProfileNav} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

nsition但我无法解决