我做了世博会应用程序与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?请把手给予我。
4条答案
按热度按时间5sxhfpxr1#
我只是通过在我的
app.json
中指定backgroundColor
来匹配闪屏的背景颜色,从而解决了这个问题。backgroundColor
的Expo文档(string)-应用的背景颜色,位于任何React视图后面。这也称为根视图背景颜色。6个字符长的十六进制颜色字符串,例如
'#000000'
。默认值为白色:'#ffffff'
.jgwigjjp2#
请尝试在
App.js
中使用SplashScreen.preventAutoHideAsync()
,然后再宣告它。例如:
不要忘记删除
loadResourcesAndDataAsync()
函数中的SplashScreen.preventAutoHideAsync()
调用,只将其保存在App.js
文件中。我希望这对你有帮助。对我有用。
lymgl2op3#
刚刚得到了突破,这几天后,所以你会修改你的索引.ts文件
您的代码
它应该是什么:
通过添加
initialRouteName
,您的问题应该得到解决3z6pesqy4#
他们的另一个原因也确保您的导入{useState,useEffect }或其他挂钩从react不react.development,你将面临,如果你发布你的应用程序在博览会或生成的API或apk