React Native 在使用Expo时,在闪屏后, Flink (Flash),显示白色屏幕

guykilcj  于 2022-12-14  发布在  React
关注(0)|答案(4)|浏览(145)

我做了世博会应用程序与React原生导航5.
please refer my solved question(same install situation).
但在首次启动时启动后,白色屏幕 Flink ( Flink :大约0.5秒)。特别是,在黑暗主题,我可以很容易地找到这个错误。
这是应用程序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>
    );
  }
}

这是导航公司的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>
  );
}

在挂接处,使用缓存资源.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;
}

并使用颜色方案.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?请把手给予我。

5sxhfpxr

5sxhfpxr1#

我只是通过在我的app.json中指定backgroundColor来匹配闪屏的背景颜色,从而解决了这个问题。
backgroundColor的Expo文档
(string)-应用的背景颜色,位于任何React视图后面。这也称为根视图背景颜色。6个字符长的十六进制颜色字符串,例如'#000000'。默认值为白色:'#ffffff' .

jgwigjjp

jgwigjjp2#

请尝试在App.js中使用SplashScreen.preventAutoHideAsync(),然后再宣告它。
例如:

SplashScreen.preventAutoHideAsync();

export default function App() {
...

不要忘记删除loadResourcesAndDataAsync()函数中的SplashScreen.preventAutoHideAsync()调用,只将其保存在App.js文件中。
我希望这对你有帮助。对我有用。

lymgl2op

lymgl2op3#

刚刚得到了突破,这几天后,所以你会修改你的索引.ts文件
您的代码

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,您的问题应该得到解决

3z6pesqy

3z6pesqy4#

他们的另一个原因也确保您的导入{useState,useEffect }或其他挂钩从react不react.development,你将面临,如果你发布你的应用程序在博览会或生成的API或apk

相关问题