Expo Android 从底部标签导航器切换到 material 顶部标签导航器时出现白色闪烁

Question

White flicker when switching from bottom tab navigator to top tab navigator

这个白色的闪烁在这个 gif 之外更加明显。但是我正在使用 Expo 管理的 React Native 项目，当我从底部选项卡导航器切换到顶部选项卡导航器时，屏幕闪烁白色。此问题仅发生在 Android。最重要的是，当您按下 TextInput 打开键盘时，在键盘动画发生时，屏幕在键盘占据的部分变成白色。这是我在 App.js

的导航器

const AuthTabs = createMaterialTopTabNavigator();
const AuthStackScreen = () => (
      <AuthTabs.Navigator tabBarOptions={options}>
          <AuthTabs.Screen name="Sign In" component={SignInScreen} />
          <AuthTabs.Screen name="Sign Up" component={SignUpScreen} />
      </AuthTabs.Navigator>
    );

const Tab = createBottomTabNavigator();
  const MainStack = () => (
    <Tab.Navigator>
      <Tab.Screen name="Deals" component={DealsStackScreen} />
      <Tab.Screen name="Categories" component={CategoriesStackScreen} />
      <Tab.Screen name="My Account" component={MyAccountStackScreen} />
    </Tab.Navigator>

  const RootStack = createStackNavigator();
  const Root = () => (
      <RootStack.Navigator headerMode="none" cardStyle={{opacity: 1}} >
          <RootStack.Screen name="Home" component={MainStack}/>
          <RootStack.Screen name="Auth" component={AuthStackScreen}/>
      </RootStack.Navigator>
  );

    return (
      <AuthContextProvider>
        <NavigationContainer theme={{ colors: {background: `${Colors.surface}` }}}>
          <Root />
        </NavigationContainer>
      </AuthContextProvider>
    );

我尝试将我的主题颜色添加到 NavigationContainer，但这并没有解决问题。另外 link 显示了正在发生的事情的 GIF。

Answer 1

是的，您必须将 RootStack 包裹在一个以 backgroundColor 作为主题背景颜色的视图周围

你的RootStack现在看起来像这样

import { useTheme } from '@react-navigation/native';

... 

const { colors } = useTheme();

const RootStack = createStackNavigator();

const Root = () => (
  <View style={{ flex:1, backgroundColor: colors.background }}> // This is the catch..Also it needs flex:1
    <RootStack.Navigator headerMode="none" cardStyle={{ opacity: 1 }}>
      <RootStack.Screen name="Home" component={MainStack} />
      <RootStack.Screen name="Auth" component={AuthStackScreen} />
    </RootStack.Navigator>
  </View>
);

Expo Android 从底部标签导航器切换到 material 顶部标签导航器时出现白色闪烁

Expo Android there is a white flicker when switching from bottom tab navigator to material top tab navigator

javascript

react-native

react-native-android

react-native-navigation

expo