标签导航器背景在打开前闪烁答案

【问题标题】：Tab Navigator Background flashes before opening标签导航器背景在打开前闪烁
【发布时间】：2020-10-17 12:11:49
【问题描述】：

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

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

【问题讨论】：

我会说！如果您使用的是平面列表，请在选项卡屏幕组件上使用延迟加载！或使用 recyclerViewReactNative ！它不是乱七八糟的标签导航器；在我看来，您的数据列表的设置方式！
当我在选项卡导航器中导航时不会发生这种情况，只有当我从堆栈导航器中转到第二个选项卡时才会发生这种情况。
你有其他标签的列表吗？据我所知！选项卡中的组件尽快安装导航器命中路径！所以更好地加载受控和分页的平面列表

标签： react-native react-navigation stack-navigator react-navigation-v5 tabnavigator

【解决方案1】：

对于任何为此苦苦挣扎的人，我用在选项卡导航器中添加 initialLayout 属性。

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

【讨论】：