在 React Native Expo 中导航路线或弹出键盘时出现白色闪屏

Question

import { Redirect, router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { View, Text, ScrollView, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { images } from "../constants";
import CustomButton from "../components/CustomButton";


export default function App() {
  return (
    <SafeAreaView className="bg-primary h-full">
      <ScrollView contentContainerStyle={{ height: "100%" }}>
        <View className=" w-full justify-center items-center min-h-[85vh] px-4">
          <Image
            source={images.logo}
            className="w-[130px] h-[84px] mt-3"
            resizeMode="contain"
          />
          <Image
            source={images.cards}
            className="max-w-[380px] w-full h-[300px]"
            resizeMode="contain"
          />
          <View className="relative mt-5">
            <Text className="text-3xl text-white font-bold text-center">
              Discover endless posibilites of
              <Text className="text-secondary-200"> Aora!</Text>
            </Text>
            <Image
              source={images.path}
              className="w-[126] h-[15] -bottom-2 -right-4 absolute "
              resizeMode="contain"
            />
          </View>
          <Text className="text-sm font-pregular text-gray-100 mt-7 text-center">
            Where creativity meets innovation: Embark on a journey of limitless
            exploration with Aura
          </Text>
          <CustomButton
            title="Continue With Email"
            handlePress={() => router.push('/signin')}
            containerStyle="w-full"
          />
        </View>
      </ScrollView>
      <StatusBar backgroundColor="#161622" style="light"/> 
    </SafeAreaView>
  );
}

index.jsx

_layout.jsx:
import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import { View } from "react-native";

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });

  useEffect(() => {
    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <Stack>
        <Stack.Screen  name="index" options={{ headerShown: false }} />
        <Stack.Screen name="(auth)" options={{ headerShown: false }} />
    </Stack>
  );
}

每当我导航到任何 Auth 路由或单击表单字段和键盘弹出窗口时，屏幕上都会出现一个小的白色 slpash，我想在我的 React Native Expo 应用程序上消除它，请注意，我正在使用深色主题和这种白色闪烁使应用程序体验看起来非常糟糕。上面我附上了 _layout.jsx 和 indx.jsx 代码，请让我知道需要进行哪些更改。

Answer 1

您确定它与您的启动画面有关吗？它可能与您的应用程序在屏幕之间看到的背景颜色有关。

在 app.json / app.config.js 的博览会文档中，如果向下滚动，您将找到一个名为“backgroundColor”的值。尝试将其设置为深色主题颜色，看看是否有帮助。