EXPO 应用程序在 iOS 出现在前面时会闪烁，但 Android 没有问题。它是由 EXPO 自动创建的（反应导航）

Posted 2023-03-15

【中文标题】EXPO 应用程序在 iOS 出现在前面时会闪烁，但 Android 没有问题。它是由 EXPO 自动创建的（反应导航）

【英文标题】：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)

【发布时间】：2020-11-07 15:02:43

【问题描述】：

我使用 Expo(React Navigation 5.0) 创建了我的应用程序，并将“createBottomTabNavigator”更改为“createMaterialBottomTabNavigator”。但是当它在前面，它在后面时，它是眨眼的。

这是为我的启动应用程序捕获的终端屏幕。 creating my app by EXPO

这是我自己修改的代码。

import  createMaterialBottomTabNavigator  from '@react-navigation/material-bottom-tabs';


const BottomTab = createMaterialBottomTabNavigator<BottomTabParamList>();

其余代码由“expo init my-app”自动生成

这是 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>
    );
 

这是 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

希望有人能帮帮我

【参考方案1】：

这是 react-native 中的一个已知错误。 https://github.com/facebook/react-native/issues/28525

尝试用以下代码替换 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>;

【讨论】：

它运行良好。其实myapp的代码我已经做了差不多了，正准备发布。如果不是您的解决方案，主题将只是“轻”。感谢 Vitali T！！！

你好，@Vitali T。我有other bug。能再帮帮我吗？