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

2022-01-23 00:00:00 javascript react-native expo react-native-android react-native-navigation

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

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

This white flicker is much more noticeable outside of this gif. But I am using an Expo managed React Native project and when I switch from my Bottom tab navigator to my Top tab navigator the screen flickers white. This issue only occurs on Android. On top of that, when you press a TextInput to open the keyboard, the screen turns white in the section the keyboard takes up while the keyboard animation is occuring. Here are my navigators in 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.

I tried adding my theme color to the NavigationContainer but this did not fix the issue. Also link shows the GIF of what is happening.

推荐答案

是的，你必须将你的 RootStack 包裹在一个 View 周围，以 backgroundColor 作为主题的 backgroundColor

Yes, you have to wrap your RootStack around a View with backgroundColor as theme's backgroundColor

您的 RootStack 现在看起来像这样

Your RootStack would look something like this now

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

相关文章