[英]EXPO app is blink at iOS when it is appeared to front but Android is no problem. It was created automatically by EXPO (react navigation)
I have created my app with Expo(React Navigation 5.0) and changed "createBottomTabNavigator" to "createMaterialBottomTabNavigator".我已经使用 Expo(React Navigation 5.0) 创建了我的应用程序,并将“createBottomTabNavigator”更改为“createMaterialBottomTabNavigator”。 But When it is at front as soon as it was at back, it is blink.但是当它在后面时就在前面时,它是眨眼。
This is the captured screen of terminal for my initiating app.这是我的启动应用程序的终端捕获屏幕。 creating my app by EXPO通过 EXPO 创建我的应用程序
This is the code which is only changed by me.这是仅由我更改的代码。
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const BottomTab = createMaterialBottomTabNavigator<BottomTabParamList>();
The rest of code is automatically made by "expo init my-app"其余代码由“expo init my-app”自动生成
This is App.tsx这是 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 />
</SafeAreaProvider>
);
}
} }
and this is index.tsx这是 index.tsx
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';
import NotFoundScreen from '../screens/NotFoundScreen';
import { RootStackParamList } from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';
// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<RootNavigator />
</NavigationContainer>
);
}
// A root stack navigator is often used for displaying modals on top of all other content
// Read more here: https://reactnavigation.org/docs/modal
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>
);
}
This is blinking captured video这是闪烁的捕获视频
I hope anyone can help me我希望任何人都可以帮助我
It is a known bug in react-native.这是 react-native 中的一个已知错误。 https://github.com/facebook/react-native/issues/28525 https://github.com/facebook/react-native/issues/28525
Try to replace useColorScheme hook (hooks/useColorScheme.ts) with the following code:尝试用以下代码替换 useColorScheme 钩子 (hooks/useColorScheme.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>; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.