使用Expo时，启动屏幕后，闪烁（闪光）并出现白屏

问题描述 投票：0回答：6

我用 React Native 导航 5 制作了 Expo 应用程序。

请参考我已解决的问题（相同的安装情况）。

但是第一次启动后，白屏闪烁（闪烁：约0.5秒）。特别是，在深色主题下，我可以轻松找到这个错误。

这是App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

 if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar style='light'/>
      </SafeAreaProvider>
    );
  }
}

这是 nvigation 的 index.tsx 

import { RootStackParamList } from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Root" component={BottomTabNavigator} />
      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
    </Stack.Navigator>
  );
}

在Hook处，使用CachedResources.ts

import { MaterialIcons } from '@expo/vector-icons';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import * as React from 'react';

export default function useCachedResources() {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHideAsync();

        await Font.loadAsync({
          ...MaterialIcons.font,
          'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
        });
      } catch (e) {
        console.warn(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
      }
    }
    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

并使用ColorScheme.ts

import { Appearance, ColorSchemeName } from 'react-native';
import { useEffect, useRef, useState } from 'react';

export default function useColorScheme(delay = 500): NonNullable<ColorSchemeName> {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  let timeout = useRef<NodeJS.Timeout | null>(null).current;

  useEffect(() => {
    Appearance.addChangeListener(onColorSchemeChange);

    return () => {
      resetCurrentTimeout();
      Appearance.removeChangeListener(onColorSchemeChange);
    };
  }, []);

  function onColorSchemeChange(preferences: Appearance.AppearancePreferences) {
    resetCurrentTimeout();

    timeout = setTimeout(() => {
      setColorScheme(preferences.colorScheme);
    }, delay);
  }

  function resetCurrentTimeout() {
    if (timeout) {
      clearTimeout(timeout);
    }
  }

  return colorScheme as NonNullable<ColorSchemeName>;
}

如何解决这个bug？请把手给我。

react-native navigation expo
6个回答
9
投票

我刚刚通过在 

backgroundColor
中指定 
app.json
来匹配启动屏幕的背景颜色解决了这个问题。

世博文档 

backgroundColor

（字符串）-您的应用程序的背景颜色，位于任何 React 视图后面。这也称为根视图背景颜色。 6 个字符长的十六进制颜色字符串，例如，

'#000000'
。默认为白色：
'#ffffff'
。

2
投票

尝试在声明之前在 

SplashScreen.preventAutoHideAsync()
中使用 
App.js
。

例如：

SplashScreen.preventAutoHideAsync();

export default function App() {
...

不要忘记删除 

SplashScreen.preventAutoHideAsync()
函数中的 
loadResourcesAndDataAsync()
调用。仅将其保留在 
App.js
文件中。

我希望这对您有帮助。为我工作。

1
投票

这可以通过两种方式完成。

  1. 使用 

    npx expo install expo-system-ui
    安装软件包，并将以下几行添加到根文件（组件外部）：

    import * as SystemUI from "expo-system-ui";

SystemUI.setBackgroundColorAsync("transparent");

// Note: you will put the lines (above) outside the component
export default function App() {
    return <></>;
}

  2. 或者，将 

    backgroundColor
    添加到 app.json:

    {
   "expo": {
      name: "MyAwesomeApp",
      backgroundColor: "#00000000"
   }
}

我更喜欢第一种方式，因为 app.json 中的“backgroundColor”预计是 RRGGBB，而我们提供的是 AARRGBB。

0
投票

您必须安装两者

expo-system-ui 和 expo-splash-screen

我不知道为什么我需要安装两者，即使我不使用expo-splash-screen。但否则它不起作用，所以只需安装两个

然后在app.ts的顶部

import * as SystemUI from "expo-system-ui";

SystemUI.setBackgroundColorAsync("transparent");
-1
投票

几天后在这方面取得了突破，所以您将在 index.ts 文件中修改什么 注意：这仅适用于expo React Native

你的代码

function RootNavigator() {
 return (
   <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Root" component={BottomTabNavigator} />
      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 
      'Oops!' }} />
   </Stack.Navigator>
 );
}

应该是什么：

function RootNavigator() {
  return (
   <Stack.Navigator initialRouteName="Root" screenOptions={{ headerShown: false 
   }}>
    <Stack.Screen name="Root" component={BottomTabNavigator} />
    <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 
     'Oops!' }} />
   </Stack.Navigator>
 );
}

通过添加

initialRouteName
你的问题应该得到解决

-2
投票

他们的其他原因还确保您导入 {useState,useEffect } 或其他来自 React 的钩子而不是 React.development，如果您在博览会上发布您的应用程序或生成 API 或 apk，您将面临这样的问题

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.