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

问题描述

我使用 Expo(React Navigation 5.0) 创建了我的应用程序并更改了createBottomTabNavigator".到创建MaterialBottomTabNavigator".但是当它在前面，它在后面时，它是眨眼的.

I have created my app with Expo(React Navigation 5.0) and changed "createBottomTabNavigator" to "createMaterialBottomTabNavigator". But When it is at front as soon as it was at back, it is blink.

这是为我的启动应用程序捕获的终端屏幕.通过 EXPO 创建我的应用

This is the captured screen of terminal for my initiating app.creating my app by EXPO

这是我自己修改的代码.

This is the code which is only changed by me.

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


const BottomTab = createMaterialBottomTabNavigator<BottomTabParamList>();

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

The rest of code is automatically made by "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

and this is 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>
  );
}

这是闪烁的捕获视频

希望有人能帮帮我

推荐答案

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

It is a known bug in react-native.https://github.com/facebook/react-native/issues/28525

尝试用以下代码替换 useColorScheme 钩子 (hooks/useColorScheme.ts):

Try to replace useColorScheme hook (hooks/useColorScheme.ts) with the following code:

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>;
}

这篇关于EXPO 应用程序在 iOS 出现在前面时会闪烁，但 Android 没有问题.它是由 EXPO 自动创建的(反应导航)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！