选项卡导航器背景在打开前闪烁

Question

我在我的应用程序中使用 React Navigation 5 进行导航。我有一个嵌套在 Stack Navigator 中的 Tab Navigator。当我从 Stack Navigator 中的主屏幕转到选项卡屏幕时，选项卡屏幕的一半在打开前闪烁。附上图片供参考。我该如何解决这个问题？

const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    >
    
    <HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: 'Overview',
      }}
    />
    <HomeStack.Screen
      name="Top Tabs"
      component={TopTabScreen}
      options={{
        title: 'Explore Menu',
      }}
    />
    <HomeStack.Screen
      name="vDetails"
      component={vDetailScreen}
      options={{
        title: '',
        headerMode: 'none',
        headerTransparent: true,
      }}
    />
    <HomeStack.Screen
      name="nDetails"
      component={nDetailScreen}
      options={{
        title: '',
        headerMode: 'none',
        headerTransparent: true,
      }}
    />
    
  </HomeStack.Navigator>
);

const TopTabScreen = ({navigation}) => {
  return (
    <TopTabs.Navigator
      tabBarOptions={{
        labelStyle: {fontSize: 13, fontFamily: 'pro'},
        tabStyle: {width: 140},
        pressColor: '#ffbbbb',
        style: {backgroundColor: '#eee', elevation: 0, shadowOpacity: 0},
        activeTintColor: '#e4293e',
        inactiveTintColor: '#aaa',
        scrollEnabled: true,
        
      }}>
      <TopTabs.Screen
        name="Tab 1"
        component={Tab1}
        options={{
          title: 'Veg Pizza',
        }}
      />
      <TopTabs.Screen
        name="Tab 2"
        component={Tab2}
        options={{
          title: 'Non Veg Pizza',
        }}
      />
     
    </TopTabs.Navigator>
  );
};

Answer 1

对于任何遇到这个问题的人，我用在选项卡导航器中添加 initialLayout 道具。

TopTabs.Navigator
      lazy="true"
      initialLayout={{width: Dimensions.get('window').width}}

选项卡导航器背景在打开前闪烁

Tab Navigator Background flashes before opening

react-native

react-navigation

stack-navigator

react-navigation-v5

tabnavigator