Javascript 从底部选项卡导航器切换到材质顶部选项卡导航器时会出现白色闪烁

这种白色闪烁在gif之外更为明显。但我使用的是一个Expo托管的React原生项目，当我从底部选项卡导航器切换到顶部选项卡导航器时，屏幕会闪烁白色。此问题仅在Android上发生。最重要的是，当您按文本输入打开键盘时，键盘动画出现时，键盘占据的部分屏幕将变为白色。下面是我在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 authtab=createMaterialTopTabNavigator（）；
const AuthStackScreen=（）=>(
);

const Tab=createBottomTabNavigator（）；
常量主堆栈=（）=>(

const RootStack=createStackNavigator（）；
常量根=（）=>(
);

返回(
);

---

我尝试将我的主题颜色添加到

导航容器

，但这并没有解决问题。此外，链接还显示正在发生的事情的GIF。

是的，您必须将根堆栈包装在一个以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>
);

从'@react-navigation/native'导入{useTheme}；
... 
const{colors}=useTheme（）；
const RootStack=createStackNavigator（）；
常量根=（）=>(
//这就是问题所在。它还需要弹性：1
);

在应用程序的根目录周围放置一个包装器视图，并设置一个背景颜色，以便在出现这种情况时可见。@brentvatne完全正确！当我用视图包装它时，整个屏幕都变白了。我还尝试将NavigationContainer中的主题添加到RootStack.Navigator中，但这不起作用，所以请给视图一个颜色Flex的1…检查答案再相信我错过了。非常感谢！如果你认为你的问题得到解决，考虑对其他用户的答案，谁遇到这个问题，以便它可以帮助他们…谢谢

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

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