Expo Android 从底部选项卡导航器切换到材料顶部选项卡导航器时出现白色闪烁

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，但这并没有解决问题。链接还显示了正在发生的事情的 GIF。

Answer 1

是的，您必须将您的 RootStack 包裹在一个 View 周围，并将 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>
);